Remove column from specific table with JQuery

Question

I'm using a CMS that doesn't let me edit the HTML, I can only use JavaScript and HTML to customize the way it looks. There's a page with 3 tables and I want to remove (or hide) the 2nd column from the 2nd table. Here's the HTML code:

<TABLE>
   <TR>
      <TD>&nbsp;</TD>
      <TD>&nbsp;</TD>
   </TR>
   <TR>
      <TD>&nbsp;</TD>
      <TD>&nbsp;</TD>
   </TR>
</TABLE>

<TABLE>
   <TR>
      <TH>Row 1</TH>
      <TH>Row 2</TH>
      <TH>Row 3</TH>
   </TR>
   <TR>
      <TD>&nbsp;</TD>
      <TD>&nbsp;</TD>
      <TD>&nbsp;</TD>
   </TR>
   <TR>
      <TD>&nbsp;</TD>
      <TD>&nbsp;</TD>
      <TD>&nbsp;</TD>
   </TR>
</TABLE>

<TABLE>
   <TR>
      <TH>Row 1</TH>
      <TH>Row 2</TH>
      <TH>Row 3</TH>
   </TR>
   <TR>
      <TD>&nbsp;</TD>
      <TD>&nbsp;</TD>
      <TD>&nbsp;</TD>
   </TR>
   <TR>
      <TD>&nbsp;</TD>
      <TD>&nbsp;</TD>
      <TD>&nbsp;</TD>
   </TR>
</TABLE>

How do I remove JUST the second column in the second table?

Since you have tagged this with jquery, have a look at this question: http://stackoverflow.com/questions/455958/hide-show-column-in-an-html-table — Raul Marengo, Mar 28 '12 at 12:01
I've looked at similar questions, but the problem I'm having is targeting just the 2nd table. I can't edit the HTML, so I can only use jQuery to target it. How do you select the 2nd column in the 2nd table only without selecting the other 2 tables? — Nate Allen, Mar 28 '12 at 12:06

score 4 · Accepted Answer · answered Mar 28 '12 at 12:06

4

Check this fiddle : http://jsfiddle.net/FJfbW/1/

$('td:nth-child(2), th:nth-child(2)', 'table:eq(1) tr').css('background', '#f00');

You can use .remove() without using .css() to get rid of the column

answered Mar 28 '12 at 12:06

Malitta N

3,384
22
30

jb10210 · Answer 2 · 2012-03-28T12:26:08.553

1

Using jquery: http://jsfiddle.net/upeVs/

$('table:eq(1) tr td:nth-child(2),table:eq(1) tr th:nth-child(2)').remove();

Edit:
Solution given by @blackpla9ue is maybe a little bit more performant given that it only once looks for the table row:

$('td:nth-child(2), th:nth-child(2)', 'table:eq(1) tr').remove();

edited Mar 28 '12 at 12:26

answered Mar 28 '12 at 12:05

jb10210

1,158
5
15

score 0 · Answer 3 · answered May 23 '12 at 15:12

I have seen that the tables do not have ids. So @blackpla9ue's answer is the most appropriate. But if you need to remove the second row of a table which has an id then go for the below code.

$('td:nth-child(2), th:nth-child(2)', '#tblEventSearchResults tr').css('background', '#f00');

Remove column from specific table with JQuery

3 Answers3