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();

});

Once you fix your ids, take a look at this answer: http://stackoverflow.com/a/5901376/69817 — Erik Ahlswede, Mar 28 '16 at 19:55
Thanks guys for your input. As i had mentioned in my initial comments, i had attempted to change id tags to class before posting this question. The example that you showed Erik works, however my example uses 3 nested tables within a table and for some reason, i can not get it to hide columns on load. I'll keep toying around to get it working. And thanks again for your input. — kBoni, Mar 29 '16 at 14:28

Thomas Maddocks · Accepted Answer · 2016-03-29T14:47:00.887

2

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.

edited Mar 29 '16 at 14:47

answered Mar 28 '16 at 19:58

Thomas Maddocks

1,355
9
24

It works but unfortunately, it does not hide columns within nested tables which is what my question was about. Thanks anyway. – kBoni Mar 29 '16 at 14:30
I'm struggling to understand what you want. You can put the class `column-hide` on any column, even if it is nested 1000 tables down. I've edited my example to show how you can hide columns in nested tables. – Thomas Maddocks Mar 29 '16 at 14:45
Hi, here is a the fiddle that i was working with. I was looking to hide Jan Feb and Mar 2015 on load. https://jsfiddle.net/kBoni/5wf3jyf9/. Hopefully you can get to the link. Let me know otherwise. I'm still working on it but so far it hasn't worked. Thanks – kBoni Mar 29 '16 at 15:23
The problem with this fiddle is that you haven't included jQuery in the page. You can include jQuery by clicking the javascript + cog link (top right of the JS window) and select a version from the "Frameworks & Extensions" drop down to include. I've done this and it appears to be working as expected? See my fiddle: https://jsfiddle.net/p7mgpopr/1/ – Thomas Maddocks Mar 29 '16 at 15:38
You are right. I'm dumbfounded by the fact that i cant get it to work. Your code is the same exact one i have. I checked the javascript + cog link (top right of the JS window) and have "jQuery//code.jquery.com/jquery-2.2.2" selected under "Frameworks & Extensions" drop down. It still does not work. Am i missing something? – kBoni Mar 29 '16 at 15:58
Does my fiddle work for you? Also, did you press "Run" - top left of the screen after including the jQuery library? – Thomas Maddocks Mar 29 '16 at 16:01
I changed it from "jQuery//code.jquery.com/jquery-2.2.2" to "jQuery-2.2.1" and it worked like a charm. Thank you for your patience. – kBoni Mar 29 '16 at 16:03

Hide Column in a nested HTML table

1 Answers1