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>

希望这会有所帮助。

隐藏嵌套HTML表格中的列

1 个答案: