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 stackoverflow.com/questions/12455699/… for answer with colspan — LCJ
– LCJ, Commented Sep 19, 2012 at 5:18

Mamun · Accepted Answer · 2019-07-06 14:16:22Z

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 6, 2019 at 14:16

Mamun

69k9 gold badges51 silver badges62 bronze badges

answered Jun 24, 2012 at 22:22

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

matt3141 · Accepted Answer · 2012-06-24 22:21:35Z

0

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

answered Jun 24, 2012 at 22:21

matt3141

4,4411 gold badge22 silver badges25 bronze badges

1 Comment

Joe Jag Over a year ago

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

Collectives™ on Stack Overflow

Hiding table columns with jQuery based on column header

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related