Simple Jquery code to hide column

StackOverflow https://stackoverflow.com/questions/19378221

  •  30-06-2022
  •  | 
  •  

Question

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>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("tr").click(function(){
    $(this).hide();
  });
});
</script>
</head>
<body>
<table width="800" border="0" cellspacing="1" cellpadding="1">
  <tr>
    <td bgcolor="#6600FF">9</td>
    <td bgcolor="#6600FF">10</td>
    <td bgcolor="#6600FF">11</td>
    <td bgcolor="#6600FF">12</td>
  </tr>
  <tr>
    <td bgcolor="#CCCC66">13</td>
    <td bgcolor="#CCCC66">14</td>
    <td bgcolor="#CCCC66">15</td>
    <td bgcolor="#CCCC66">16</td>
  </tr>
  <tr>
    <td bgcolor="#FF9966">17</td>
    <td bgcolor="#FF9966">18</td>
    <td bgcolor="#FF9966">19</td>
    <td bgcolor="#FF9966">20</td>
  </tr>
  <tr>
    <td bgcolor="#993399">21</td>
    <td bgcolor="#993399">22</td>
    <td bgcolor="#993399">23</td>
    <td bgcolor="#993399">24</td>
  </tr>
</table>

<blockquote>&nbsp;</blockquote>
</body>
</html>
Was it helpful?

Solution

Try

$(document).ready(function(){
    $("td").click(function(){
        var idx = $(this).index();
        $('table tr').find('td:eq(' + idx + ')').hide()
    });
});

Demo: Fiddle

OTHER TIPS

If you want to hide the column N:

$('tr').each(function() {
    $('td', $(this)).eq(N).hide()
});

Note that N = 0 for the first column and N = 3 for the 4th column.

use this code:

$(document).ready(function(){
  $("tr td").click(function(){
    $(this).hide();
  });
});

jsfiddle is here

Try this: http://jsfiddle.net/CPpYU/

$(document).ready(function () {
    $("td").click(function () {
        var td = this;
        var tr = $(td).parent("tr");
        var column = tr.children().get().indexOf(td);
        console.log(column + "OO");
        $("td:nth-child(" + column + ")").hide();
    });
});

Then this would be simple but first you have to understand your task.

You have to remove only td of every column of your table. you have to find td you have click index of that table. For example 00 ,01,11..33 for tow-dimensional table (3*3).

  • if your index is one of them 00,10,20 then hide them all <td>.(first column)
  • if your index is one of them 01,11,21 then hide them all <td>.(second column)
  • if your index is one of them 02,13,24 then hide them all (third column)

Give id to your table <td id="td-00" .

Thanks but I haven't give you complete code but its a simplest solution of your problem. mostly of 5 line code of jQuery.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top