Hiding table columns with jQuery based on column header

Question

I've looked at a couple of similar questions here but I still can's seem to get it to work. I'm trying to hide specific columns in a table that is being automatically generated on the page. I've managed to hide column header and the corresponding cells in the first row but I'm not sure how to make it work for the rest of the rows. What am I missing?

$(document).ready(function() {
    $("table.lc_Table:eq(0) tr:eq(0) th").each(function(ind,ele) {
        if( $.trim($(this).text()).match(/(Available|Order Limit)/gi) )
        {
          $("table.lc_Table:eq(0) tr th:eq("+ind+"), table.lc_Table:eq(0) tr td:eq("+ind+")").hide();
        }
    });
});

<table border="0" cellspacing="0" cellpadding="4" class="lc_Table">
<tr>
    <th class="lc_Heading">
        <p class="PaddedListHeadingsC">Ticket Class</p>
    </th>
    <th class="lc_Heading">
        <p class="PaddedListHeadingsC">Available</p>
    </th>
    <th class="lc_Heading">
        <p class="PaddedListHeadingsC">Order Limit</p>
    </th>
    <th class="lc_Heading">
        <p class="PaddedListHeadingsC">Price</p>
    </th>
</tr>
<tr class="lc_Row0">
    <td class="lc_Cell">
        <p>Attendee1</p>
    </td>
    <td align="right" class="lc_Cell">
        <p>50</p>
    </td>
    <td align="right" class="lc_Cell">
        <p>No Limit</p>
    </td>
    <td align="right" class="lc_Cell">
        <p>$0.00</p>
    </td>
</tr>
<tr class="lc_Row1">
    <td class="lc_Cell">
        <p>Attendee2</p>
    </td>
    <td align="right" class="lc_Cell">
        <p>50</p>
    </td>
    <td align="right" class="lc_Cell">
        <p>No Limit</p>
    </td>
    <td align="right" class="lc_Cell">
        <p>$0.00</p>
    </td>
</tr>

Refer http://stackoverflow.com/questions/12455699/show-hide-table-column-with-colspan-using-jquery for answer with colspan — LCJ, Sep 19 '12 at 05:18

score 3 · Answer 1 · edited Jul 06 '19 at 14:16

3

Should work

$('tr').each(function(){
    $(this).find('td').eq(0).hide();
})

For both TH & TD can use

$('tr').each(function(){
    $('tr').children().eq(0).hide();
})

edited Jul 06 '19 at 14:16

Mamun

66,969
9
47
59

answered Jun 24 '12 at 22:22

charlietfl

170,828
13
121
150

score 0 · Accepted Answer · answered Jun 24 '12 at 22:21

0

:eq is evaluating to only one element. Instead use :nth-child which counts relative to an elements parent.

answered Jun 24 '12 at 22:21

matt3141

4,303
1
19
24

This worked like a charm thanks... this is what I ended up with. $(document).ready(function() { $("table.lc_Table:eq(0) tr:eq(0) th").each(function(ind,ele) { if( $.trim($(this).text()).match(/(Available|Order Limit)/gi) ) { $("table.lc_Table:eq(0) tr th:nth-child("+(ind+1)+"), table.lc_Table:eq(0) tr td:nth-child("+(ind+1)+")").hide(); } }); }); – Joe Jag Jun 25 '12 at 14:32

Hiding table columns with jQuery based on column header

2 Answers2