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.

Answer 1

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';
  }
}