javascript - 如何找到我的 HTML 表格中每一列的特定条目的编号？

Question

我的 HTML 文件中有两个表格。我想从 myTable 中生成一些统计信息到 summaryTable 中。我希望将测试总数[第 1 列]、“成功”总数[第 2 列]和“失败”总数[第 2 列] 放入摘要表的第 1 至 3 列。感谢您的帮助。

HTML

<table id="myTable">
  <tr>
    <th>Test</th>
    <th>Status</th>
    <th>Last Run</th>
  </tr>
  <tr>
    <td>RL-008</td>
    <td><font color=RED>Failure</font></td>
    <td>Friday, May 19, 2017 03:19:29 AM
      <br>
    </td>
  </tr>

  <tr>
    <td>SO-010</td>
    <td><font color=GREEN>Success</font></td>
    <td>Thursday, May 18, 2017 10:44:17 PM
      <br>
    </td>
  </tr>
  <tr>
    <td>SC-001</td>
    <td><font color=RED>Failure</font></td>
    <td>Friday, May 19, 2017 12:27:31 AM
      <br>
    </td>
  </tr>
</table>

<table id=summaryTable>
  <tr>
    <th id="summary">No of Tests</th>
    <th id="summary">No of Failed</th>
    <th id="summary">No of Passed</th>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

Answer 1

您的代码需要稍微清理一下(删除 FONT 标签，不要对“摘要”等使用重复的 ID)，但这应该可以满足您的需求。如果您使用服务器端语言来循环和呈现主表(PHP 等)，您可以使用 PHP 来呈现汇总表来获取计数。

$(document).ready(function() {

  var $testTable = $('#myTable');
  var numTests = $('tbody tr', $testTable).length;
  var numFailed = $('tbody tr:contains("Failure")', $testTable).length;
  var numPassed = $('tbody tr:contains("Success")', $testTable).length;

  $('#num-tests').text(numTests);
  $('#failed-tests').text(numFailed);
  $('#passed-tests').text(numPassed);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable">
  <thead>
    <tr>
      <th>Test</th>
      <th>Status</th>
      <th>Last Run</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>RL-008</td>
      <td>
        <font color="RED">Failure</font>
      </td>
      <td>Friday, May 19, 2017 03:19:29 AM
        <br>
      </td>
    </tr>

    <tr>
      <td>SO-010</td>
      <td>
        <font color="GREEN">Success</font>
      </td>
      <td>Thursday, May 18, 2017 10:44:17 PM
        <br>
      </td>
    </tr>
    <tr>
      <td>SC-001</td>
      <td>
        <font color="RED">Failure</font>
      </td>
      <td>Friday, May 19, 2017 12:27:31 AM
        <br>
      </td>
    </tr>
  </tbody>
</table>

<table id="summaryTable">
  <tr>
    <th>No of Tests</th>
    <th>No of Failed</th>
    <th>No of Passed</th>
  </tr>
  <tr>
    <td id="num-tests"></td>
    <td id="failed-tests"></td>
    <td id="passed-tests"></td>
  </tr>
</table>