javascript - 计算表格中具有特定单元格内容的行数

Question

我想用 javascript 计算具有特定单元格内容的行。
这是表格的 HTML 代码:

<table class="table table-bordered" id="UsersDataTable">
    <thead>
      <tr>
        <th>H0</th>
        <th>H1</th>
        <th>H2</th>
        <th>H3</th>
        <th>H4</th>
        <th>H5</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>C0</td>
        <td>C1</td>
        <td>C2</td>
        <td>C3</td>
        <td>C4</td>
        <td><center><img src=".\pictures\green.jpg" class="img-circle" alt="Green" width="20" height="20"></center></td>
      </tr>
    </tbody>
</table>

如何使用 'alt="Green"' 对所有单元格进行计数？ 到目前为止，我有这个代码片段:

function CountRows(TableID, alt) {
    var refTab = document.getElementById(TableID)
    var counter = 0
    for ( var i = 0; row = refTab.rows[i]; i++ ) {
        alert(refTab.rows[i].cells[5].innerHTML);
        if (refTab.rows[i].cells[5].innerHTML === alt)
        {
            counter ++
        }
    }

    return counter
}

感谢帮助
帕特里克

Answer 1

您可以使用 document.querySelectorAll("#UsersDataTable [alt='Green']") 获取您想要的内容，如下所示。然后获取返回数组的长度。这是你的计数。

var v=document.querySelectorAll("#UsersDataTable [alt='Green']");
console.log(v.length);

<table class="table table-bordered" id="UsersDataTable">
<thead>
  <tr>
    <th>H0</th>
    <th>H1</th>
    <th>H2</th>
    <th>H3</th>
    <th>H4</th>
    <th>H5</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>C0</td>
    <td>C1</td>
    <td>C2</td>
    <td>C3</td>
    <td>C4</td>
    <td><center><img src=".\pictures\green.jpg" class="img-circle" alt="Green" width="20" height="20"></center></td>
  </tr>
</tbody>