Table in Javascript - hide/show columns

Question

I've searched SO for hours but have not been able to find a table created like mine where there are hide/show instances - I've tried using some of the standard hide/show for standard HTML tables however it doesn't translate over to work like I need.

I have a table created in JS that loads data from a json and looks like:

var output = "<table class = sample>",

tableHeadings = "<thead>" +

//set column names
"<tr>" +
"<th></th>" +
"<th><u>Name:</u></th>" +
"<th><u>Address:</u></th>" +
"<th><u>City:</u></th>" +
"<th><u>State:</u></th>" +
"<th><u>Phone Number:</u></th>" +
"<th><u>PO:</u></th>" +
"<th><u>Stuff:</u></th>" +
"<th><u>Stuff:</u></th>" +
"<th><u>Stuff:</u></th>" +
"<th><u>Stuff:</u></th>" +
"<th><u>Stuff:</u></th>" +
"</tr>" +
"</thead>";
output += tableHeadings;

output += "<td>"+'<a href="#" onclick="javascript:displayInfobox(' + (i) + ');">' + results[i]["Business Name"] +'<\/a>' + "</td>" +
"<td>" + results[i]["Address"] + "</td>" + 
"<td><center>" + results[i]["City"] + "</center></td>" + 
"<td><center>" + results[i]["StateListing"] + "</center></td>"; 

document.getElementById("placeholder").innerHTML = output;

What I am trying to do is hide/show using a button/checkbox the address column. I have tried using style.display as well as .hide/.show in jquery. Everything I try will hide the first entry but still display the addresses for every entry after that.

I need to be able hide the address information on command for ALL of the entries that are displayed.

RoliCo · Accepted Answer · 2017-11-07 10:03:20Z

4

You could use child selector:

$("td:nth-child(2)").hide()

Or add a class in your address td, and select all of the c class:

<td class='c'>
$(".c").hide()

edited Nov 7, 2017 at 10:03

answered Mar 13, 2015 at 21:02

RoliCo

1181 silver badge7 bronze badges

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

Comments

ExpectoPatronum · Accepted Answer · 2015-03-13 21:19:08Z

1

What you can do is to apply a class to each of your td while creating your table. And while hiding a particular column you can selected elements based on the class name and hide it.

Here's is the fiddle, with an example

 // Using Javascript
 function hideAddress()
 {
   var elems = document.getElementsByClassName("addr");
   for(var i = 0; i<elems.length; i++) {
     elems[i].style.display = "none";
   }
 }

 // Using Jquery
 $("#hideAddr").click(function() {
  $(".addr").hide();
 });

Hope it helps !

answered Mar 13, 2015 at 21:19

ExpectoPatronum

5074 silver badges14 bronze badges

1 Comment

Aaron Over a year ago

the jquery is fantastic. However doesnt work in a way I need -> and I'm jquery inept to boot. Thanks for the help!

Gremash · Accepted Answer · 2015-03-13 21:23:57Z

0

Here is a sample that works. I used JQuery just to create the table but the function should work without it.

http://plnkr.co/edit/MWlXNRhAAzDjPPf42a19?p=info

$(function() {
var results = [];
  results.push({
    'Business Name': 'Bus1',
    'Address': 1234,
    'City': 'test',
    'StateListing': 'CA'
  });
  results.push({
    'Business Name': 'Bus2',
    'Address': 5678,
    'City': 'test',
    'StateListing': 'CA'
  });
  results.push({
    'Business Name': 'Bus3',
    'Address': 9120,
    'City': 'test',
    'StateListing': 'CA'
  });

  function setupTable() {
    var output = "<table class = sample>",

      tableHeadings = "<thead>" +

      //set column names
      "<tr>" +
        "<th><u>Name:</u></th>" +
        "<th name='addressCol'><u>Address:</u></th>" +
        "<th><u>City:</u></th>" +
        "<th><u>State:</u></th>" +
        "<th><u>Phone Number:</u></th>" +
        "<th><u>PO:</u></th>" +
        "<th><u>Stuff:</u></th>" +
        "<th><u>Stuff:</u></th>" +
        "<th><u>Stuff:</u></th>" +
        "<th><u>Stuff:</u></th>" +
        "<th><u>Stuff:</u></th>" +
        "</tr>" +
        "</thead>";
    output += tableHeadings;

    for (var i = 0; i < results.length; i++) {
      output += "<tr><td>" + '<a href="#" onclick="javascript:displayInfobox(' + (i) + ');">' + results[i]["Business Name"] + '<\/a>' + "</td>" +
        "<td name='addressCol'>" + results[i]["Address"] + "</td>" +
        "<td><center>" + results[i]["City"] + "</center></td>" +
        "<td><center>" + results[i]["StateListing"] + "</center></td></tr>";
    }

    document.getElementById("placeholder").innerHTML = output;
  }

  setupTable();
});

function hideFunction() {
  var items = document.getElementsByName('addressCol');
  for (var i = 0; i < items.length; i++) {
    items[i].style.display = 'none';
  }
}

answered Mar 13, 2015 at 21:23

Gremash

8,3387 gold badges32 silver badges50 bronze badges

2 Comments

Aaron Over a year ago

This works perfectly, minus it doesn't have a 'show' function. I can figure that out, that part is easy enough with a working 'hide'. I appreciate the help!

Aaron Over a year ago

I ended up getting duplicating the function called it showFunction and added something like a document.getElementByID('button').style.display="none/block" to show/hide each button linked to each file. Works well enough for what I need. Thanks again for the help

Jose Manuel Abarca Rodríguez · Accepted Answer · 2015-03-13 21:47:10Z

As far as I understood, you want to hide/show columns, but I am not 100% sure. Next code hides and shows columns on a table :

<html>
  <head>
    <title>Show-Hide</title>
    <script type="text/javascript">

function hide ( column ) {
var tbl = document.getElementById( "tbl" );
var i;
for ( i = 0; i < tbl.rows.length; i++ )
  tbl.rows[ i ].cells[ column ].style.visibility = "hidden";
}

function restore () {
var tbl = document.getElementById( "tbl" );
var i;
var j;
for ( i = 0; i < tbl.rows.length; i++ )
  for ( j = 0; j < tbl.rows[ i ].cells.length; j++ )
    tbl.rows[ i ].cells[ j ].style.visibility = "visible";
}

    </script>
  </head>
  <body>
    <table id="tbl">
      <tr>
        <td><button onclick="hide(0)">Hide</button></td>
        <td><button onclick="hide(1)">Hide</button></td>
        <td><button onclick="hide(2)">Hide</button></td>
      </tr>
      <tr>
        <td>111</td>
        <td>222</td>
        <td>333</td>
      </tr>
      <tr>
        <td>444</td>
        <td>555</td>
        <td>666</td>
      </tr>
      <tr>
        <td>777</td>
        <td>888</td>
        <td>999</td>
      </tr>
    </table>
    <br/>
    <button onclick="restore();">Restore columns</button>
  </body>
</html>

Create a text file, name it as you want but use the extension HTML, copy and paste previous code, and open it in a browser. If it is not what you are looking for, we can fix it.

If you want to completely disappear the column, instead of

tbl.rows[ i ].cells[ column ].style.visibility = "hidden"; // or "visible".

use

tbl.rows[ i ].cells[ column ].style.display = "none"; // or "table-cell".

I like the way you did this, however with the table you did - it doesn't work for my table. Thanks though.

Collectives™ on Stack Overflow

Table in Javascript - hide/show columns

4 Answers 4

Comments

1 Comment

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related