如何用javascript迭代表列和表头

How to iterate table columns with table th headers with javascript?

本文关键字：表头 迭代 何用 javascript      更新时间：2023-09-26

我的作用域中有一个表行对象。我可以在行上点击链接的时候得到它

var tableRow = $(object).closest('tr');

我需要的是逐行迭代这个表的表头列。

例如:

    th1 th2 th3
tr1 td   td   td
tr2 td   td   td*

假设我的作用域是tr2，我需要到达th3下面的单元格。当我迭代它的单元格时，我怎么知道单元格在th3下面?

我想不使用列索引，而是使用列名。

遍历行上下文的每个td，并使用.eq()和.index()获得该列的对应th。如下所示:

在这个例子中，我正在搜索具有文本"two"的列

var $table = tableRow.closest('table');
var query = "two";
var result = tableRow.find('td').filter(function(){
  return $table.find('th').eq($(this).index()).html() === query;
});
console.log(result.html());


$('tr').on('click', function() {
  find($(this));
});
function find(tableRow) {
  var $table = tableRow.closest('table');
  var query = "two";
  var result = tableRow.find('td').filter(function() {
    return $table.find('th').eq($(this).index()).html() === query;
  });
  alert(result.html());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <th>One</th>
    <th>two</th>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>4</td>
    </tr>
  </tbody>
</table>

假设您的表的id是myTable，您可以:

$("#myTable td")

这将给你所有的表格单元格，如果你对它们进行迭代你将从单元格1扫到n

如果您只需要，比如每行中的第二个单元格，您可以使用以下选择器:

$("#myTable tr td:nth-child(2)")

这将返回每行中的第二个单元格

相关文章：