javascript - 使用 jQuery 在表列中的所有单元格上运行函数

Question

我有一个表元素，定义如下:$table。我试图在由特定表标题 - qc_statusTh 定义的特定列的每个单元格上运行一个函数。我找到了该表格标题的索引 (qc_statusColumnIndex)，并且能够获取该列中的下一个表格单元格 - qc_statusCell。

但是，我无法循环遍历表格单元格并对该列中的每个表格单元格运行函数。

这是我到目前为止的 JavaScript 代码:

$(document).ready(function() {
  var $table = $("table.tables.list");

  if ($table.length > 0) {
    var qc_statusTh = $("th.headersub:contains('qc_status')");
    var qc_statusColumnIndex = $(qc_statusTh).index();
    var qc_statusCell = $($table).find("td").eq(qc_statusColumnIndex);

    // this does not work. this only replaces the first cell
    // in the row after qc_statusTh with "TESTING"

    $(qc_statusCell).each(function() {
      $(this).replaceWith("TESTING");
    });

  }

});

如何编辑此代码以循环遍历表中与 qc_statusColumnIndex 具有相同索引的每个单元格？

Answer 1

如果您考虑一下，您确实想要迭代(使用 each)表格的行，而不是单元格。如果这样做，您就可以从每行中获取第 n 个 td 元素并应用您的转换。

$(document).ready(function() {
  var $table = $("table.tables.list");

  if ($table.length > 0) {
    var qc_statusTh = $("th.headersub:contains('qc_status')");
    var qc_statusColumnIndex = $(qc_statusTh).index();
    
    var qc_rows = $($table).find('tr');

    $(qc_rows).each(function() {
      $(this).find('td').eq(qc_statusColumnIndex).replaceWith("TESTING");
    });

  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<table class="tables list">
  <thead>
    <th class="headersub">qc_example</th>
    <th class="headersub">qc_status</th>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Ok</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Ok</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Error</td>
    </tr>
  </tbody>
</table>