Niloyd Niloyd - 9 months ago 44
jQuery Question

Simple Jquery code to hide column

This is the first time ever, that I have posted on StackOverflow. The reason being, I have always found a solution each time I searched stackoverflow for it.

However this time I am still struggling to find a simple solution like the code I am using here. (Found on W3Schools) I have already looked at some very advanced and complicated Hide/Reveal tables functionalities, but I am after something simply like below. The current code very easily hides a whole when clicked on. I wanted to know, if the same can be applied for a column.

I tried using col, colgroup but it does not work. Can someone please suggest?
Also tried applying TH, but that doesn't work too.

PS: I understand HTML & CSS very well, and some very basic PHP, I have used Jquery sparingly, but cannot completely read and understand javascript well enough to make my own modifications or write my own code yet.

<!DOCTYPE html>
<script src="">
<table width="800" border="0" cellspacing="1" cellpadding="1">
<td bgcolor="#6600FF">9</td>
<td bgcolor="#6600FF">10</td>
<td bgcolor="#6600FF">11</td>
<td bgcolor="#6600FF">12</td>
<td bgcolor="#CCCC66">13</td>
<td bgcolor="#CCCC66">14</td>
<td bgcolor="#CCCC66">15</td>
<td bgcolor="#CCCC66">16</td>
<td bgcolor="#FF9966">17</td>
<td bgcolor="#FF9966">18</td>
<td bgcolor="#FF9966">19</td>
<td bgcolor="#FF9966">20</td>
<td bgcolor="#993399">21</td>
<td bgcolor="#993399">22</td>
<td bgcolor="#993399">23</td>
<td bgcolor="#993399">24</td>


Answer Source


        var idx = $(this).index();
        $('table tr').find('td:eq(' + idx + ')').hide()

Demo: Fiddle