Hide Column in a nested HTML table

Question

I'm trying to hide several columns when the page loads with the ID tag using jQuery. However it is not working. What might be the issue? I also tried to switch from identifying the column by ID tag and using Class - that also did not work. Please help. See the HTML code and jQuery below.

HTML Code:

<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 code:

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

});

Answer 1

Firstly, you cannot use the same ID in many places. An ID is a unique way of referencing a particular element. I would scrap the use of IDs anyway and change them to classes.

The following should work:

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

Hopefully this helps.