Simple Jquery code to hide column

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>

jQuery / javascript isn't that magic after all: try to think about it this way: what CSS would you add to make a column disappear? jQuery only offers you an way to do this more dynamically $("tr").hide() adds a css-style display:none to all "tr" elements, for example... — DThought
– DThought, Commented Oct 15, 2013 at 9:58
To hide column, you should first write the click event on td. Get the index no of the td clicked wrt its parent tr. Then on click of td, you have to call hide fn for all the the nth child of TRs. — ankur140290
– ankur140290, Commented Oct 15, 2013 at 10:04

Arun P Johny · Accepted Answer · 2013-10-15 10:00:09Z

4

Try

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

Demo: Fiddle

answered Oct 15, 2013 at 10:00

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Niloyd Over a year ago

Thanks @Arun This is exactly what I was looking for! Thanks a Million! Do you have any recommendations for learning how to use JQuery functions?

Hamza Kubba · Accepted Answer · 2013-10-15 10:02:06Z

0

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.

answered Oct 15, 2013 at 10:02

Hamza Kubba

2,26715 silver badges12 bronze badges

Comments

Mohsen Safari · Accepted Answer · 2013-10-15 10:02:39Z

0

use this code:

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

jsfiddle is here

answered Oct 15, 2013 at 10:02

Mohsen Safari

6,8055 gold badges45 silver badges59 bronze badges

2 Comments

Jai Over a year ago

it won't close the first td in every tr.

Niloyd Over a year ago

Thanks Jai, I tried this, but what I am looking for is to hide the column.

DThought · Accepted Answer · 2013-10-15 10:07:53Z

0

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();
    });
});

answered Oct 15, 2013 at 10:07

DThought

1,3148 silver badges18 bronze badges

1 Comment

Niloyd Over a year ago

DThought I tried this, but after hide 1 or 2 columns it stops working.

marc_s · Accepted Answer · 2016-11-03 08:21:14Z

0

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.

edited Nov 3, 2016 at 8:21

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Oct 15, 2013 at 10:10

Manwal

23.9k15 gold badges65 silver badges95 bronze badges

1 Comment

Niloyd Over a year ago

Thanks Deepak, I understand your logic, but I would not be able to write this code.

Collectives™ on Stack Overflow

Simple Jquery code to hide column

5 Answers 5

1 Comment

Comments

2 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

2 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related