入れ子になった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> 

うまくいけば、このことができます。