Hide and/or Show Table Columns

Question

I need a table that can display only certain columns depending on whether a check box is selected or not. If selected, I want all columns to show. If not selected, I need it to show only the "weekly" class columns. I want to use as little JavaScript (if any) as possible and needs to be cross-browser compatible.

 <table>
   <tr class="weekly">
     <td></td>
   </tr>
   <tr class="overall">
     <td></td>
   </tr>
 </table>
 <input type="checkbox" name="data" value="Show Overall Data"  />

Simply put, I need a table that will hide and show certain columns depending on what the check box status is.

Also, I am not good with coding so I would need someone to paste the entire code including HTML tags and what not.

[something like this](http://stackoverflow.com/questions/2595835/how-to-hide-table-columns-in-jquery) — Anupam, May 05 '12 at 04:25
@anu I looked at it and it sounds like what I'm looking for, but I need the code in HTML so I can copy and paste it, I'm a beginner with JS. — Shane Hicks, May 05 '12 at 04:29

score 2 · Accepted Answer · answered May 05 '12 at 04:48

Javascript

function check()
{

  if(document.getElementById("weekly").style.display == "none")
    document.getElementById("weekly").style.display = "block";
  else
    document.getElementById("weekly").style.display = "none";
  if(document.getElementById("overall").style.display == "block")
   document.getElementById("overall").style.display = "none";
  else
   document.getElementById("overall").style.display = "block";

}

And HTML

<table>
   <tr class="weekly" id="weekly" style="display:none">
     <td>ABBB</td>
   </tr>
   <tr class="overall" id="overall" style="display:none">
     <td>BCC</td>
   </tr>
 </table>
<input type="checkbox" name="data" value="Show Overall Data" onclick="check()"/>

This hides the row and the question was how to hide the column. — Matt Smith, Mar 14 '16 at 04:35

sha256 · Answer 2 · 2012-05-05T04:44:15.807

1

EDITED: Full html here. using jquery

<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script>

$(document).ready(function(){


if ($("input:checkbox").is(":not(:checked)")){
    $('tr').hide();
   $('tr.weekly').show();
}

});
</script>
</head>
<body>
<input type="checkbox" name="data"/>

<table>
   <tr class="weekly">
     <td>WEEEKLY</td>
   </tr>
   <tr class="overall">
     <td>OVERLLL</td>
   </tr>
 </table>

</body>
</html>

edited May 05 '12 at 04:44

answered May 05 '12 at 04:32

sha256

3,029
1
27
32

3

Hey buddy the question is to hide the column and you have given the solution to hide the row.. Completely wrong answer with respect to question. – Murtaza May 05 '12 at 04:33
Can you write this in HTML form for me? I'm not that good at JavaScript. – Shane Hicks May 05 '12 at 04:35
@Murtaza, He said column, that's right, but if you see his code, anyone would understand he wants to hide all columns in that row. Why don't you understand? – sha256 May 05 '12 at 04:47
@ShaneHicks, Is that what you wanted? :) – sha256 May 05 '12 at 04:50
Yes @sha404 you are right? He has not explained the Question properly. – Murtaza May 05 '12 at 05:02

score 0 · Answer 3 · edited May 05 '12 at 14:12

0

use jquery

$(document).ready(function () {
    $('.overall').hide();
}); 

$("#data").is(':checked')
    ? $(".overall").show() 
    : $(".overall").hide();

change name = "data" to Id = "data"

edited May 05 '12 at 14:12

derekerdmann

17,696
11
76
110

answered May 05 '12 at 04:32

user1376261

1
2

score 0 · Answer 4 · answered May 05 '12 at 04:57

Building upon the example @anu pointed to in an earlier stackoverflow answer, here's a live example in jsbin.

http://jsbin.com/ehodul/4/edit#javascript,html,live

Below is (most) of the code, but again, I would encourage you to tinker with the example on jsbin.

<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="jquery.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
  table { padding: 0; border-collapse: collapse; }
  table th { background-color: #eee; }
  table td, th { border: 1px solid #d7d7d7; padding: 7px; }
</style>
</head>
<body>


<select id="myOptions">
  <option value="1">hide col 1</option>
  <option value="2">hide col 2</option>
  <option value="3">hide col 3</option>
  <option value="4">hide col 4</option>
</select>  

  <p>&nbsp;</p>

<table id="myTable" cellspacing="0" cellpadding="0">
  <thead>
    <tr>
      <th>col 1</th>
      <th>col 2</th>
      <th>col 3</th>
      <th>col 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1abcdefg</td>
      <td>2abcdefg</td>
      <td>3abcdefg</td>
      <td>4abcdefg</td>
    </tr>
    <tr>
      <td>1abcdefg</td>
      <td>2abcdefg</td>
      <td>3abcdefg</td>
      <td>4abcdefg</td>
    </tr>
    <tr>
      <td>1abcdefg</td>
      <td>2abcdefg</td>
      <td>3abcdefg</td>
      <td>4abcdefg</td>
    </tr>
    <tr>
      <td>1abcdefg</td>
      <td>2abcdefg</td>
      <td>3abcdefg</td>
      <td>4abcdefg</td>
    </tr>
  </tbody>
  </table>  

  <script type="text/javascript">
function hideColumn(columnIndex) {
   $('#myTable thead th, #mytable tbody td').show();
   $('#mytable thead th:nth-child('+(columnIndex)+'), #mytable tbody td:nth-child('+(columnIndex)+')').hide();

}

    $("#myOptions").change(function() {
      selectedVal = $(this).val();
      console.log(selectedVal);
      hideColumn( selectedVal );
    });

  </script>
</body>
</html>

Hide and/or Show Table Columns

4 Answers4