如果 td 使用 JavaScript/JQuery 具有 NIL 值，如何在表中隐藏 tr 标记？答案

【问题标题】：How to hide tr tag in a table if the td has NIL value using JavaScript/JQuery?如果 td 使用 JavaScript/JQuery 具有 NIL 值，如何在表中隐藏 tr 标记？
【发布时间】：2016-02-14 15:13:12
【问题描述】：

如果 td 标记使用 javascript 具有 NIL 值，我目前在隐藏 tr 标记时遇到问题，下面是表的代码，它作为第三个表出现，因为我目前正在开发一个 chrome 扩展程序，这很重要，以便定位它.

这是我在 jquery 中尝试过的，但我需要在 javascript 中执行此操作：

$('tr').each(function(){
    var tr = $(this);
    if (tr.find('td:eq(0)').text()=="NIL"
        && tr.find('td:eq(1)').text()=="NIL"
        && tr.find('td:eq(2)').text()=="NIL"
    ) tr.addClass('hidden');
});

这是表格代码：

        <tr>
            <td bgcolor=#5A768D width="22%" height="30" rowspan=5 valign=top>
                <font color=#FFFFFF>Assignments</font>
            </td>
            <td bgcolor='#EDEADE' width="76%" height="30">
                NIL
            </td>
        </tr>

        <tr>
            <td bgcolor='#EDEADE' width="76%" height="30">
                NIL
            </td>
        </tr>

        <tr>
            <td bgcolor='#EDEADE' width="76%" height="30">
                NIL
            </td>
        </tr>

        <tr>
            <td bgcolor='#EDEADE' width="76%" height="30">
                NIL
            </td>
        </tr>

        <tr>
            <td bgcolor='#EDEADE' width="76%" height="30">
                NIL
            </td>
        </tr>

        </table>

【问题讨论】：

你可以在 Chrome 扩展中使用 jQuery，不管它的价值。如果做不到这一点，表格元素有一个javascript属性（一个数组）rows，并且每个元素都有一个属性cells（也是一个数组）。您可以使用tableElem.rows[0].cells[0].innerText 访问左上角单元格的内容

标签： javascript jquery html google-chrome google-chrome-extension

【解决方案1】：

这就是你想要的：

$("table td:contains('NIL')").closest("tr").css("color", "red");

/* ABOVE HERE IS JUST FOR DEMO CHANGING OF COLOR
   BUT USE FOLLOWING TO HIDE 
$("table td:contains('NIL')").closest("tr").hide();
*/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
  <tr>
    <td bgcolor=#5A768D width="22%" height="30" rowspan=6 valign=top>
      <font>Assignments</font>
    </td>
    <td bgcolor='#EDEADE' width="76%" height="30">
      NIL
    </td>
  </tr>
  <tr>
    <td bgcolor='#EDEADE' width="76%" height="30">
      NIL
    </td>
  </tr>
  <tr>
    <td bgcolor='#EDEADE' width="76%" height="30">
      NIL
    </td>
  </tr>
  <tr>
    <td bgcolor='#EDEADE' width="76%" height="30">
      NIL
    </td>
  </tr>
  <tr>
    <td bgcolor='#EDEADE' width="76%" height="30">
      NIL
    </td>
  </tr>
  <tr>
    <td bgcolor='#EDEADE' width="76%" height="30">
      Not a " N I L"
    </td>
  </tr>
</table>

更新：

$("table table table td:contains('NIL')").closest("tr").css("color", "red");

/* ABOVE HERE IS JUST FOR DEMO CHANGING OF COLOR
   BUT USE FOLLOWING TO HIDE 
$("table td:contains('NIL')").closest("tr").hide();
*/

table {
  border: 1px solid #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <table>
        <tr>
          <td>
            <table>
              <tr>
                <td bgcolor=#5A768D width="22%" height="30" rowspan=6 valign=top>
                  <font>Assignments</font>
                </td>
                <td bgcolor='#EDEADE' width="76%" height="30">
                  NIL
                </td>
              </tr>
              <tr>
                <td bgcolor='#EDEADE' width="76%" height="30">
                  NIL
                </td>
              </tr>
              <tr>
                <td bgcolor='#EDEADE' width="76%" height="30">
                  NIL
                </td>
              </tr>
              <tr>
                <td bgcolor='#EDEADE' width="76%" height="30">
                  NIL
                </td>
              </tr>
              <tr>
                <td bgcolor='#EDEADE' width="76%" height="30">
                  NIL
                </td>
              </tr>
              <tr>
                <td bgcolor='#EDEADE' width="76%" height="30">
                  Not a " N I L"
                </td>
              </tr>
            </table>
          </td>
          <td>Second Table</td>
        </tr>
      </table>
    </td>
    <td>First Table</td>
  </tr>
</table>

【讨论】：

我在 /table/table/table 这样的表格中有表格代码，我该如何选择？
@rahulkapoor 检查更新片段。