javascript - 隐藏嵌套 HTML 表中的列

Question

当页面使用 jQuery 加载 ID 标记时，我试图隐藏几列。但是它不起作用。可能是什么问题？我还尝试从通过 ID 标签识别列切换到使用 Class - 这也不起作用。请帮忙。请参阅下面的 HTML 代码和 jQuery。

HTML 代码:

<table id="myTable" border="1">
<thead>
<tr>
<th colspan="3">Produce Funnel </th>
</tr>
<tr>
<th class="header-0"></th>
<th colspan='1' class="header-1">2015
<img src="http://t1.gstatic.com/images?q=tbn:1PS9x2Ho4LHpaM:http://www.unesco.org/ulis/imag/plus.png" />
</th>
<th colspan='1' class="header-2">2016
<img src="http://t1.gstatic.com/images?q=tbn:1PS9x2Ho4LHpaM:http://www.unesco.org/ulis/imag/minus.png" />
</th>
</thead>
<tbody>
<tr>
<td>
<table id="table0">
<tr>
<th>Index</th>
<th>Produce</th>
</tr>
<tr>
<td>1</td>
<td nowrap>Purchased</td>
</tr>
<tr>
<td>2</td>
<td nowrap>Returned</td>
</tr>
<tr>
<td>3</td>
<td nowrap>Perished</td>
</tr>
<tr>
<td><B>4</B></td>
<td nowrap><B>Sold</B></td>
</tr>
</table>
</td>
<td>
<table id='table1'>
<tr>
<th id='YR2015'>Jan</th>
<th id='YR2015'>Feb</th>
<th id='YR2015'>Mar</th>
<th nowrap id="YR2015T">2015 YTD Total</th>
</tr>
<tr>
<td id='YR2015' class="YR2015A">218,672</td>
<td id='YR2015' class="YR2015A">245,120</td>
<td id='YR2015' class="YR2015A">203,017</td>
<td id="YR2015T" class="TBL1TOTA"><B>$1,648,076</B></td>
</tr>
<tr>
<td id='YR2015' class="YR2015B">32,682</td>
<td id='YR2015' class="YR2015B">37,971</td>
<td id='YR2015' class="YR2015B">33,209</td>
<td id="YR2015T" class="TBL1TOTB"><B>$251,172</B></td>
</tr>
<tr>
<td id='YR2015' class="YR2015C">8,976</td>
<td id='YR2015' class="YR2015C">9,162</td>
<td id='YR2015' class="YR2015C">6,762</td>
<td id="YR2015T" class="TBL1TOTC"><B>$61,635</B></td>
</tr>
<tr>
<td id='YR2015' class="YR2015D"><B>177,012</B></td>
<td id='YR2015' class="YR2015D"><B>197,986</B></td>
<td id='YR2015' class="YR2015D"><B>163,045</B></td>
<td id="YR2015T" class="TBL1TOTD"><B>$1,335,268</B></td>
</tr>
</table>
</td>
<td>
<table id='table2'>
<tr>
<th id="YR2016">Jan</th>
<th id="YR2016">Feb</th>
<th id="YR2016">Mar</th>
<th nowrap id="YR2016T">2016 YTD Total</th>
</tr>
<tr>
<td id="YR2016" class="YR2016A">133,794</td>
<td id="YR2016" class="YR2016A">160,256</td>
<td id="YR2016" class="YR2016A">140,998</td>
<td id="YR2016T" class="TBL2TOTA"><B>$435,049</B></td>
</tr>
<tr>
<td id="YR2016" class="YR2016B">16,366</td>
<td id="YR2016" class="YR2016B">20,379</td>
<td id="YR2016" class="YR2016B">12,088</td>
<td id="YR2016T" class="TBL2TOTB"><B>$48,834</B></td>
</tr>
<tr>
<td id="YR2016" class="YR2016C">4,942</td>
<td id="YR2016" class="YR2016C">6,348</td>
<td id="YR2016" class="YR2016C">8,645</td>
<td id="YR2016T" class="TBL2TOTC"><B>$19,936</B></td>
</tr>
<tr>
<td id="YR2016" class="YR2016D"><B>112,485</B></td>
<td id="YR2016" class="YR2016D"><B>133,527</B></td>
<td id="YR2016" class="YR2016D"><B>120,264</B></td>
<td id="YR2016T" class="TBL2TOTD"><B>$366,277</B></td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>

jQuery 代码:

$(document).ready(function(){
        $('#table1 #YR2015').hide();

});

Answer 1

首先，你不能在很多地方使用同一个ID。 ID 是引用特定元素的独特方式。无论如何，我会放弃使用 ID 并将其更改为类。

以下应该有效:

$(document).ready(function(){
    $('.column-hide').hide();
});

HTML:

<table>
    <tr>
        <td>Column 1</td>
        <td>
            <table>
                <tr>
                    <td>Nested Table Column 1</td>
                    <td class="column-hide">Nested Table Column 2</td>
                </tr>
                <tr>
                    <td>Nested Table Column 1</td>
                    <td class="column-hide">Nested Table Column 2</td>
                </tr>
           </table>
        </td>
    </tr>
    <tr>
        <td>Column 1</td>
        <td>Column 2</td>
    </tr>
</table>

希望这有帮助。