CODEWITHSUNDEEP
javascriptjquery
divz
divz

Reputation: 7957

hide a table td using Jquery

In the following code how can i hide the id column of the table.

var joblist = "";
joblist = joblist + "<table ><tr><th >Select</th><th id='td_1'>ID</th><th >Name</th><th >Names</th><th>OS</th><th >Server</th></tr>";

var tabString = '<tr ><td > ' + '<input type="radio" name="joblist" onclick="myfunc(this);"  id= ' + value.jobid + 'value=' + value.jobid + '> </td><td id="td_1" >' + value._id + '</td><td >' + value.names + '</td><td a>' + value.os +  '</td><td >' + value.server + '</td></tr>';

joblist = joblist + tabString;

I tried 

$("#td_1").hide()

But it is not working.Any other solutions?

Upvotes: 1

Views: 4453

Answers (4)

Adrian Wragg
Adrian Wragg

Reputation: 7401

As others have mentioned, you cannot match multiple elements based purely on an ID; they must be unique across the entire document. I suspect that what you are seeing is the 'ID' heading disappearing from the top of your table, but the values remaining visible later on in the table.

Other answers have mentioned switching to a class; there is another alternative available, using the nth-child pseudo-selector:

    $("table tr > *:nth-child(2)").hide();

This will hide the 2nd element immediately under tr, as * matches both the TH and the TD. If you never want it visible, then better solutions include CSS:

    table tr > *:nth-child(2) { display: none; }

or simply rendering it into an <input type='hidden' /> instead and including it in one of your existing cells (e.g. alongside the radio button).

Note that you have a few additional errors in your HTML, including:

    <td a>' + value.os +

that you may want to investigate at the same time.

Upvotes: 1

Mihai Matei
Mihai Matei

Reputation: 24276

Before hiding an element you must assign it to DOM. If you want to hide multiple elements you must use class attribute instead of id

var joblist = "";
joblist = joblist + "<table ><tr><th >Select</th><th class='td_1'>ID</th>" +
                    "<th >Name</th><th >Names</th><th>OS</th><th >Server</th></tr>";

var tabString = '<tr ><td > ' + '<input type="radio" name="joblist" 
               onclick="myfunc(this);"  id= ' + value.jobid + 'value=' + 
               value.jobid + '> </td><td class="td_1" >' + value._id +
              '</td><td >'+ value.names + '</td><td a>' + value.os +  
              '</td><td >' +  value.server + '</td></tr>';

joblist = joblist + tabString;

$('#myElement').append(joblist);
$('.td_1').hide();

Upvotes: 0

Devang Rathod
Devang Rathod

Reputation: 6736

First of all ID must be unique. you have declared same ID for TH and TD

$("#your_td_id").hide();

if you more than one TD then use class instead of ID.

Upvotes: 1

Amit
Amit

Reputation: 15387

First of all if there is multiple td then don't use same id, in this case add some other post or pre. And use as 

 $('[id^="td_1"]').hide();//for post
 $('[id$="td_1"]').hide();//pre

Try this

 $('[id="td_1"]').hide();

Upvotes: 3

Related Questions