如果td具有使用JavaScript / JQuery的NIL值,如何在表中隐藏tr标签?

时间:2016-02-13 06:30:32

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

如果td标签使用javascript具有NIL值,我目前遇到隐藏tr标签的问题,下面是表格的代码,它出现在第3个表格中,因为我正在开发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>

1 个答案:

答案 0 :(得分:0)

这就是你想要的:

$("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>