How to select table elements by column first with js / jquery?
Given the following table:
====|=====|=====|=====|
0 0 1 0
0 0 0 1
1 0 0 0
0 1 0 0
Tables in HTML are defined by rows and then columns. So the index of elements selected with javascript follows this order as well. So if I select all of the "1s" and put them in a loop. The first item selected will be the first "1" on the first line.
How can I select the first first in the first column, assuming that "1" could be anywhere in that column (one per column)? And then go to the second column and find the second number "1"?
Here's a loop that selects line by line:
//All '1 have a .one class
$("tr td.one").each(function(){});
============ UPDATE =============
@Alex Char's answer is correct. I modified it a bit so that it works for what I am trying to achieve. He's how I ended up using his solution:
var all_ones = [];
$(".one").each(function(){
//Loop through all 1s get the td index and it parent (tr) index.
all_ones.push([$(this).index(),$(this).parent().index()]);
});
//Sort all_ones by the td index
all_ones.sort(function(a, b) {
return a[0] - b[0];
});
//Loop throught the sorted index and print whatever
for(var i=0;i < all_ones.length;i++){
$("table tr:eq(" + all_ones[i][1] + ") td:eq(" + all_ones[i][0] + ")").css({color:"red"});
}
You can try to use . sort () * like:
var cells = $('table td').sort(function(a, b) {
//compare the cell index
var c0 = $(a).index();
var c1 = $(b).index();
if (c0 == c1) {
//compare the row index if needed
var r0 = $(a).parent().index();
var r1 = $(b).parent().index();
return r0 - r1;
} else
return c0 - c1;
});
//console.log(cells);
cells.each(function() {
if ($(this).html() == "1") {
$(this).css("background", "red");
}
document.write($(this).html());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>0</td>
<td>0</td>
<td class="one">1</td>
<td>0</td>
</tr>
<tr>
<td>0</td>
<td>0</td>
<td>0</td>
<td class="one">1</td>
</tr>
<tr>
<td class="one">1</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>0</td>
<td class="one">1</td>
<td>0</td>
<td>0</td>
</tr>
</table>
*. sort () is not officially part of jquery.
Links
source to share
I'm not sure I understand you. I believe you are asking how to loop through columns in turn, not rows. If this is not correct, please correct me.
To see, you would do something similar to:
var onesInRows = [];
for(var i = 1; i <= numberOfColumns; i++){
onesInRows.push($('tr') //get all table rows
.find('td.one:nth-child('+i+')'))
//get the tds,
//that have class one,
//that are in the row you are currently selecting
}
The first on the first line will be:
onesInRows[0].eq(0);
The first on the second line will be:
onesInRows[1].eg(0);
Update: and if you want them all in one jQuery object:
var onesInAllRows;
for(var i = 1; i <= numberOfColumns; i++){
var onesInRow = ($('tr') //get all table rows
.find('td.one:nth-child('+i+')'))
//get the tds,
//that have class one,
//that are in the row you are currently selecting
if(onesInAllRows.length !== 0){
onesInAllRows.add(onesInRow);
}
else{
onesInAllRows = onesInRow;
}
}
source to share
You can use the nth-child Selector Documentation like this:
$( "tr td.one:nth-child(1)" )
this will give you all td's marked with the first class in the first column if you only want the first one you can use
$( "tr td.one:nth-child(1)" ).first()
See JSFiddle
source to share