无法在 jquery 中选择表中的表

Unable to select table inside a table in jquery

本文关键字:选择 jquery      更新时间:2023-09-26

我目前在使用jquery选择表内的表时遇到问题,我想要的是选择表中的第二个表,如下面的HTML代码所示。我已经尝试了以下jquery代码,但是当我使用它时,它会添加第一个带有style="display:none;" tr,因为我在下面写下它以显示它选择tr,但我想选择第三个table tr。任何人都可以帮我选择正确的table.

这是我尝试过的:

    <script>
    $(document).ready(function () {
$("table td:contains('NIL')").closest("tr").hide();
});
    </script>
         <table width="79%" border="0" cellpadding="0" cellspacing="0" height="350">
              <tr style="display:none;">
                    <td valign="top" width="1%" bgcolor=#FFFFFF>
                        &nbsp;
                    </td>
                    <td valign="top" width="78%" bgcolor=#FFFFFF>

                    <center>
                    <br><b><u>COURSE PAGE - Winter Semester 2015~16</u></b><br /><br />

                    <table cellspacing='0' cellpadding='4' align='center' border='1' width='95%' style='border-collapse: collapse;' bordercolor='black'>
                        <tr align=center bgcolor=#5A768D>
                            <td width=80><font color=#FFFFFF>Course Owner</font></td>
                            <td width=70><font color=#FFFFFF>Course Code</font></td>
                            <td><font color=#FFFFFF>Course Title</font></td>
                            <td><font color=#FFFFFF>Course Type</font></td>
                            <td><font color=#FFFFFF>Faculty</font></td>
                            <td><font color=#FFFFFF>Class Nbr(s)</font></td>
                            <td><font color=#FFFFFF>Slot(s)</font></td>
                        </tr>
                        <tr bgcolor='#E1ECF2'>
                            <td width=80 align=center>SITE</td>
                            <td width=70 align=center>ITE302</td>
                            <td>Database Systems</td>
                            <td>Embedded Lab</td>
                            <td>11543 - SARAVANAKUMAR K - SITE</td>
                            <td>2039</td>
                            <td>L29+L30</td>
                        </tr>
                    </table><br>
                    <table cellspacing='0' cellpadding='4' width="95%" align='center' border='1' style='border-collapse: collapse;' bordercolor='black' height="61">
                    <tr>
                        <td bgcolor=#5A768D width="22%" height="30"><font color=#FFFFFF>Syllabus</font></td>
                        <form action='syllabus_file.asp' method='post'><td bgcolor='#EDEADE' width='75%' height='30'><input type='hidden' name='crscd' value='ITE302'><input type='hidden' name='crstp' value='ELA'><input type='hidden' name='version' value='1'><input type='submit' name='sybcmd' class='submit' value='Download'></td></form>
                    </tr>

                    <tr>
                        <td bgcolor=#5A768D width="22%" height="30" rowspan=5 valign=top>
                            <font color=#FFFFFF>Text/Reference Material</font>
                        </td>
                        <td bgcolor='#EDEADE' width="75%" height="30">
                            <a href='https://academics.vit.ac.in/faculty/Syllabus_Textbook/WINSEM2015-16_CP1673_TB01_DBMS_Lab_Manual.pdf' target='_blank'><font color=blue>DBMS_Lab_Manual.pdf</font></a>
                        </td>
                    </tr>
                    <tr>
                        <td bgcolor='#EDEADE' width="75%" height="30">
                            <a href='https://academics.vit.ac.in/faculty/Syllabus_Textbook/WINSEM2015-16_CP1673_TB02_Structured-Query-Language.pdf' target='_blank'><font color=blue>Structured-Query-Language.pdf</font></a>
                        </td>
                    </tr>
                    <tr>
                        <td bgcolor='#EDEADE' width="75%" height="30">
                            <a href='https://academics.vit.ac.in/faculty/Syllabus_Textbook/WINSEM2015-16_CP1673_TB03_students_manual.pdf' target='_blank'><font color=blue>students_manual.pdf</font></a>
                        </td>
                    </tr>
                    <tr>
                        <td bgcolor='#EDEADE' width="75%" height="30">
                            NIL
                        </td>
                    </tr>
                    <tr>
                        <td bgcolor='#EDEADE' width="75%" height="30">
                            NIL
                        </td>
                    </tr>
                    </table><br>

                    <table cellspacing='0' cellpadding='4' width="95%" align='center' border='1' style='border-collapse: collapse;' bordercolor='black' height="61">
                    <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><br>

由于您的目标是td内部tabletd,因此您需要在table内部指定table,如下所示:

$("table table td:contains('NIL')").closest("tr").hide();

或者准确地说,table td内部为:

$("table td table td:contains('NIL')").closest("tr").hide();

否则,您的条件将始终在第一个实例中满足,并且它将隐藏根tr,因为table内部有NIL td

记下 - 我不明白为什么你在第一个tr上添加了display:none;,我已经删除了它。


辛佩特

 $("table table td:contains('NIL')").closest("tr").hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="79%" border="0" cellpadding="0" cellspacing="0" height="350">
  <tr>
    <td valign="top" width="1%" bgcolor=#FFFFFF>
      &nbsp;
    </td>
    <td valign="top" width="78%" bgcolor=#FFFFFF>
      <center>
        <br><b><u>COURSE PAGE - Winter Semester 2015~16</u></b>
        <br />
        <br />
        <table cellspacing='0' cellpadding='4' align='center' border='1' width='95%' style='border-collapse: collapse;' bordercolor='black'>
          <tr align=center bgcolor=#5A768D>
            <td width=80><font color=#FFFFFF>Course Owner</font>
            </td>
            <td width=70><font color=#FFFFFF>Course Code</font>
            </td>
            <td><font color=#FFFFFF>Course Title</font>
            </td>
            <td><font color=#FFFFFF>Course Type</font>
            </td>
            <td><font color=#FFFFFF>Faculty</font>
            </td>
            <td><font color=#FFFFFF>Class Nbr(s)</font>
            </td>
            <td><font color=#FFFFFF>Slot(s)</font>
            </td>
          </tr>
          <tr bgcolor='#E1ECF2'>
            <td width=80 align=center>SITE</td>
            <td width=70 align=center>ITE302</td>
            <td>Database Systems</td>
            <td>Embedded Lab</td>
            <td>11543 - SARAVANAKUMAR K - SITE</td>
            <td>2039</td>
            <td>L29+L30</td>
          </tr>
        </table>
        <br>
        <table cellspacing='0' cellpadding='4' width="95%" align='center' border='1' style='border-collapse: collapse;' bordercolor='black' height="61">
          <tr>
            <td bgcolor=#5A768D width="22%" height="30"><font color=#FFFFFF>Syllabus</font>
            </td>
            <form action='syllabus_file.asp' method='post'>
              <td bgcolor='#EDEADE' width='75%' height='30'>
                <input type='hidden' name='crscd' value='ITE302'>
                <input type='hidden' name='crstp' value='ELA'>
                <input type='hidden' name='version' value='1'>
                <input type='submit' name='sybcmd' class='submit' value='Download'>
              </td>
            </form>
          </tr>
          <tr>
            <td bgcolor=#5A768D width="22%" height="30" rowspan=5 valign=top>
              <font color=#FFFFFF>Text/Reference Material</font>
            </td>
            <td bgcolor='#EDEADE' width="75%" height="30">
              <a href='https://academics.vit.ac.in/faculty/Syllabus_Textbook/WINSEM2015-16_CP1673_TB01_DBMS_Lab_Manual.pdf' target='_blank'><font color=blue>DBMS_Lab_Manual.pdf</font></a>
            </td>
          </tr>
          <tr>
            <td bgcolor='#EDEADE' width="75%" height="30">
              <a href='https://academics.vit.ac.in/faculty/Syllabus_Textbook/WINSEM2015-16_CP1673_TB02_Structured-Query-Language.pdf' target='_blank'><font color=blue>Structured-Query-Language.pdf</font></a>
            </td>
          </tr>
          <tr>
            <td bgcolor='#EDEADE' width="75%" height="30">
              <a href='https://academics.vit.ac.in/faculty/Syllabus_Textbook/WINSEM2015-16_CP1673_TB03_students_manual.pdf' target='_blank'><font color=blue>students_manual.pdf</font></a>
            </td>
          </tr>
          <tr>
            <td bgcolor='#EDEADE' width="75%" height="30">
              NIL
            </td>
          </tr>
          <tr>
            <td bgcolor='#EDEADE' width="75%" height="30">
              NIL
            </td>
          </tr>
        </table>
        <br>
        <table cellspacing='0' cellpadding='4' width="95%" align='center' border='1' style='border-collapse: collapse;' bordercolor='black' height="61">
          <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>
        <br>