如何使用 js/jquery 首先按列选择表元素

How to select table elements by column first with js/jquery?

本文关键字：列选 选择 元素 何使用 js jquery      更新时间：2023-09-26

给定下表：

====|=====|=====|=====|
 0     0     1     0
 0     0     0     1
 1     0     0     0
 0     1     0     0

HTML 中的表由行和列定义。因此，使用 javascript 选择的元素的索引也遵循该顺序。因此，如果我选择所有数字"1"并将它们放在一个循环中。选择的第一个元素将是第一行中的第一个"1"。

假设"1"可以在该列中的任何位置（每列一个），我将如何选择第一列中的前 1？然后移动到第二列并找到第二个数字"1"？

下面是按行选择的循环：

//All '1's have a .one class
$("tr td.one").each(function(){});
============

更新 ===

===========

@Alex夏亚的答案是正确的。我稍微修改了一下，以便它适用于我想要实现的目标。他就是我最终使用他的解决方案的方式：

var all_ones = [];
$(".one").each(function(){
   //Loop through all 1s get the td index and it's 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"});
}

你可以尝试使用 .sort（）*，如下所示：

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（） 不是 jquery 的正式组成部分。

引用

.sort（）

您可以使用第 n 个子选择器 文档如下：

$( "tr td.one:nth-child(1)" )

如果您只想要第一个您可以使用的TD，这将为您提供第一列中标有第一类的所有TD 

$( "tr td.one:nth-child(1)" ).first()

请参阅 JSFiddle

我不确定我是否理解你。我相信您正在问的是如何一次循环浏览一列而不是行。如果这不正确，请纠正我。

要看，你会做一些类似于：

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
}

第一行中的第一个是：

onesInRows[0].eq(0);

第二行中的第一个是：

onesInRows[1].eg(0);

这一切都有意义吗？

更新：如果你想让所有的人都在一个jQuery对象中：

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;
    }
}
相关文章：