I have a row in a table with the head of the row and 96 cells.
Each row is clickable by the following function
$("#table tr").click(function(){});
Now by getting value from 0 to 96, I need to get the td in the place X and do a colspan on it.
As in the form, I get value 40 I need to make the colspan on the 40th td in the clicked row.
How can I implement something like that in JavaScript or jQuery?
Thank's to Pete comment I've got how to get td to which change the attribute, the problem now is if I colspan the cell the table become deformed as on the screen
You can try something like this. You need to add colspan attribute first and then need to remove last cells as below:
$(document).ready(function(){
$("#tables tr").click(function() {
let position = 2;
let colspan = 2;
$(`td:eq(${position-1})`, this).prop('colspan', colspan);
$(`td:eq(${position+colspan})`, this).nextAll().remove();
});
});
Hope it helps you ;)
You could use the jQuery selector :eq() to get the position you want with the prop() method that will set the colspan attribute, like :
$("#table tr").click(function() {
let position = 5;
let colspan = 2;
$(`td:eq(${position-1})`, this).prop('colspan', colspan);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table" border="1">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
</table>
Related
I have a really big HTML Table with data formatted like this (a simplified version of my table):
https://pastebin.com/K5UB4cGB
The list is much bigger.
I need to know which Application runs on which Server(multiple).
I now need to somehow get all the data and store it (maybe in an array) so I can work with it.
(For example I need to compare certain applications and write a code to document it.)
I've already tried many methods I found on the web but I not sure im working in the right way.
My recent atempt is:
var data = Array();
$("table").each(function(i, v) {
data[i] = Array();
$(this).each(function(ii, vv) {
data[i][ii] = $(this).text();
});
})
document.write(data);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
<div id="result" style="color: #f00"></div>
Outputs:
1 2 3 4 6 7 8 9 10
With this method I get one array:
1,2,3,4,5,6,7,8,9,10
But I cannot access the stored vaules because for example data[0] outputs all the values and not only one.
Sorry for the long text
Thanks for your help :)
Kind Regards,
Markus
You can try using nested for loops and get a nested array of data.
let data = [];
$("table tr").each(function() {
let row = [];
$(this).children("td").each(function() {
row.push($(this).text());
})
data.push(row);
})
console.log(data);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
</table>
You need to iterate rows and within rows iterate cells
You can do this all with map()
var data = $('tr').map(function() {
return [$(this).children().map(function() {
return $(this).text().trim()
}).get()];
}).get();
console.log(JSON.stringify(data));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
</table>
<div id="result" style="color: #f00"></div>
use each to loop through td and get its text value
var val=[]
$('#table td').each(function(e){
val.push($(this).text())
})
console.log(val)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<table id="table">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
</table>
In the following I am using an each function to derive the data of the table and then pushing into an array list. I hope this code is helpful. This code is really small.
var arr = [];
$("th, td").each(function(){
arr.push($(this).text());
$("#result").text(arr);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
</table>
<div id="result" style="color: #f00"></div>
i have a html table with 10 column (i.e 1 2 3 4 5 6 7 8 9 10 ) and i want to flip columns hortizontally (i.e 10 9 8 7 6 5 4 3 2 1 ) using Jquery...
i have below code for this but this code is very long
can anyone provide short code for this..
$(function() {
jQuery.each($("table tr"), function() {
$(this).children(":eq(9)").after($(this).children(":eq(0)"));
$(this).children(":eq(8)").after($(this).children(":eq(0)"));
$(this).children(":eq(7)").after($(this).children(":eq(0)"));
$(this).children(":eq(6)").after($(this).children(":eq(0)"));
$(this).children(":eq(5)").after($(this).children(":eq(0)"));
$(this).children(":eq(4)").after($(this).children(":eq(0)"));
$(this).children(":eq(3)").after($(this).children(":eq(0)"));
$(this).children(":eq(2)").after($(this).children(":eq(0)"));
$(this).children(":eq(1)").after($(this).children(":eq(0)"));
});
});
To achieve this you could build an array from the td elements within each row, reverse() it, then append them back again:
$('table tr').each(function() {
var tds = $(this).children('td').get().reverse();
$(this).append(tds);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
</table>
Loop through tds and in loop use .prepend() to inserting element in first of parent.
$("table td").each(function() {
$(this).parent().prepend(this);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
</table>
Update:
#NoumanSaeed: html table with 11 column (i.e 1 2 3 4 5 6 7 8 9 10 Header) and i want to flip columns horizontally (i.e 10 9 8 7 6 5 4 3 2 1 Header)
In this case you should exclude last td contain header in selector using :lt().
$("table td:lt(10)").each(function() {
$(this).parent().prepend(this);
});
$("table td:lt(10)").each(function() {
$(this).parent().prepend(this);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>Header</td>
</tr>
</table>
The answers above are correct but you can also do with css.
NOTE Solution is not for table with pagination but if the data is short (one page only) you can give it a try!
if($("html").attr("dir") == "rtl") {
$("table").css({"direction": "ltr"});
}else{
$("table").css({"direction": "rtl"});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
</table>
I want to be able to add a class to a TR element, dependent on the value of the first TD element.
For example:
If I have the following array of data:
[1,2,3,4]
[5,6,7,8]
Where each array represents a tr, with each element being a td, I would like to highlight the TR where the first TD equals 5 for instance.
How would i go about doing this?
Thanks,
Below example can help!
$(function() {
var tr = $('tr').find('td:first-child');
tr.each(function() {
if ($(this).text() == 5)
$(this).parent('tr').addClass('highlight');
});
});
tr.highlight {
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</table>
I managed to solve this by using the fnRowCallback function
'fnRowCallback': function(nRow, aData, iDisplayIndex) {
$(nRow).css('cursor', 'pointer');
$(nRow).prop('title', 'Select Company');
if (aData.CompId === "COMP01") {
$(nRow).find('td').addClass('selectedCompany');
}
return nRow;
},
You can use first-child and :contains with Jquery
$('td:first-child:contains("5")').parent('tr').addClass('selected')
tr.selected {
background: yellow;
}
tr.selected td:first-child {
font-size: 1.5em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>1</td>
<td>5</td>
<td>7</td>
</tr>
</table>
Edit Note:: This will select all first td with 5 on the string
Assume the content of the desired row td is "two", either of these would work:
$(document).ready(function() {
var findMe = "two";
$('#mytable').find('tr').filter(function(index) {
var isTwo = $(this).find('td').eq(0).text() === findMe;
return isTwo;
}).addClass('highlight');
$('#mytable').find('tr').find('td:first').filter(':contains("' + findMe + '")').parent('tr').addClass('highlight');
});
I have a table that include rows that any row has a attribute which called entity-state. I have get all td from rows that entity-state !== 'deleted'.
<table>
<tr entity-state="deleted">
<td>1</td>
<td>2</td>
</tr>
<tr entity-state="added">
<td>3</td>
<td>4</td>
</tr>
<tr entity-state="added">
<td>5</td>
<td>6</td>
</tr>
</table>
I want get all td values that are in rows that entity-state is added only.
You can use the attribute selector for this:
$('tr[entity-state="added"]');
// or
// $('tr:not([entity-state="deleted"])');
You should note that entity-state is a non-standard attribute and will mean your HTML is invalid. To solve this you should use a data-* attribute instead:
<tr data-entity-state="deleted">
<td>1</td>
<td>2</td>
</tr>
<tr data-entity-state="added">
<td>3</td>
<td>4</td>
</tr>
$('tr[data-entity-state="added"]');
It's also possible to achieve what you need using filter(), which is useful when using data-* attributes as changing their values through jQuery does not update the DOM.
var $enabledRows = $('tr').filter(function() {
return $(this).data('entity-state') == 'added';
// or:
// return $(this).data('entity-state') !== 'deleted';
});
You can use combination of attribute equals selector and :not() (or not()) selector
$('tr:not([entity-state="deleted"])')
or
$('tr').not('[entity-state="deleted"]')
$('tr:not([entity-state="deleted"])')
// or $('tr').not('[entity-state="deleted"]')
.css('color', 'red')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr entity-state="deleted">
<td>1</td>
<td>2</td>
</tr>
<tr entity-state="added">
<td>3</td>
<td>4</td>
</tr>
<tr entity-state="added">
<td>5</td>
<td>6</td>
</tr>
</table>
You can use not selector with attribute selector,
$("tr:not([entity-state='deleted']) td").each(function() {
console.log($(this).text())
});
$('table tr[entity-state=added]').each(function(i,v){
var $td = $(this).find('td')
console.log($td.text())
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr entity-state="deleted">
<td>1</td>
<td>2</td>
</tr>
<tr entity-state="added">
<td>3</td>
<td>4</td>
</tr>
<tr entity-state="added">
<td>5</td>
<td>6</td>
</tr>
</table>
Use the attr selector for this
Assuming this table (actually it could have more columns and rows):
<table id="vehicles">
<tr>
<th>Type</th>
<th>Color</th>
<th>Wheels</th>
</tr>
<tr>
<td>Car</td>
<td>Red</td>
<td>4</td>
</tr>
<tr>
<td>Motorcycle</td>
<td>Green</td>
<td>2</td>
</tr>
<tr>
<td>Bike</td>
<td>Blue</td>
<td>2</td>
</tr>
<tr>
<td>Car</td>
<td>Blue</td>
<td>4</td>
</tr>
<tr>
<td>Bike</td>
<td>Green</td>
<td>2</td>
</tr>
<tr>
<td>Motorcycle</td>
<td>Red</td>
<td>2</td>
</tr>
</table>
Now my goal is to be able to click on the table data (cells), for example "Car", and then show only the two cars. Another click on "Car" should show the hole table again. Or one click on "Red", and then only the red vehicles (red car and red motorcycle) should be shown. How can this be achieved using jQuery?
$(function () {
$( "td" ).on( "click", function() {
var type = $(this).text();
$('td:first-child').parent('tr:not(:contains('+type+'))').toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="vehicles">
<tr>
<th>Type</th>
<th>Color</th>
<th>Wheels</th>
</tr>
<tr>
<td>Car</td>
<td>Red</td>
<td>4</td>
</tr>
<tr>
<td>Motorcycle</td>
<td>Green</td>
<td>2</td>
</tr>
<tr>
<td>Bike</td>
<td>Blue</td>
<td>2</td>
</tr>
<tr>
<td>Car</td>
<td>Blue</td>
<td>4</td>
</tr>
<tr>
<td>Bike</td>
<td>Green</td>
<td>2</td>
</tr>
<tr>
<td>Motorcycle</td>
<td>Red</td>
<td>2</td>
</tr>
</table>
Stores the text from current td, hides tr nodes which do not contain the text.
Here's a really really simple test that might help you get started.
$(function () {
$("#vehicles tr td").click(function () {
var desc = $(this).html();
$("#vehicles tr").css("background-color", "white");
$("#vehicles").find(":contains(" + desc + ")").closest("tr").css("background-color", "red");
});
});
This assigns a click event to every TD element, stores its value somewhere and then checks if said value exists in the table, highlighting the elements that are matched. Give it a spin, I think it'll set you off in the right direction.