Hide Column/td Of The Table By Using Jquery

How can we hide the column of the table by using jquery < table >< tr >< td id='td_1' >name< td id='td_2' >title<

Solution 1:

$(document).ready(function() {
    $("#td_1").hide();
});

But ideally, you want to use a class instead of an ID.

so

<table><tr><tdclass="td_1">name</td><tdclass="td_2">title</td><tdclass="td_3">desc</td></tr><tr><tdclass="td_1">Dave</td><tdclass="td_2">WEB DEV</td><tdclass="td_3">Blah Blah</td></tr><tr><tdclass="td_1">Nick</td><tdclass="td_2">SEO</td><tdclass="td_3">Blah Blah and blah</td></tr></table>

And then you would use similar code:

$(document).ready(function() {
    $(".td_1").hide()
});

So the only thing that changed is the hash(#) to a dot(.). Hash is for ID's, Dot is for classes.

Yet another way would be to use the nthChild selector.

$(document).ready(function() {
    $('tr td:nth-child(1)').hide();
});

Where 1 is the column number to be hidden.

HTH

Solution 2:

Some case, user use th for table header, you can use this script for hide column with th.

$('#test').click(function() {
    $('th:nth-child(2), tr td:nth-child(2)').hide();
})

$('#test').click(function() {
    $('th:nth-child(2), tr td:nth-child(2)').hide();
})

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><tableborder=1><tr><thid="td_1">name</th><thid="td_2">title</th><thid="td_3">desc</th></tr><tr><tdid="td_1">Dave</td><tdid="td_2">WEB DEV</td><tdid="td_3">Blah Blah</td></tr><tr><tdid="td_1">Nick</td><tdid="td_2">SEO</td><tdid="td_3">Blah Blah and blah</td></tr></table><buttonid='test'>Hide title</button>

Solution 3:

http://www.devcurry.com/2009/07/hide-table-column-with-single-line-of.html