javascript - 如何使用 javascript 迭代带有表头的表列？

Question

我的范围内有表格行对象。当在该行上单击链接时，我可以获得它。

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

我需要的是逐行迭代此表列。

例如:

    th1 th2 th3

tr1 td   td   td

tr2 td   td   td*

比方说，我的范围内有 tr2，我需要到达 th3 下的单元格。当我迭代它的单元格时，我怎么知道单元格在th3下面？

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

Answer 1

遍历行上下文的每个 td 并使用 .eq() 和 .index() 获取该列的相应 th。像下面这样的东西应该可以工作。

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

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>