Think Mobile

Using JavaScript to Modify Tables

This is one way of making a responsive table. You can parse the data using JavaScript and combine some table cells or expand them back to the original, depending on the window size. There are some problems with this method.

// ---------------------------------------------------------------
// Merge all the data from the 3rd cell of each row
//   into the 2nd cell, separated by " x ", so that
//   +--------------+----------+---------+
//   |  Desktop     |  1024    |   768   |
//   +--------------+----------+---------+
// becomes
//   +--------------+---------------+
//   |  Desktop     |  1024 x 768   |
//   +--------------+---------------+
// Note that we also need CSS to hide the 3rd column,
//   which will now be empty.
// ---------------------------------------------------------------

function compact ()
{
  var headers = document.getElementById ("pixels").getElementsByTagName("th");
  headers[1].innerHTML = "Width x Height";
  headers[2].innerHTML = "";
  var rows = document.getElementById ("pixels").getElementsByTagName("tr");
  for (var i=0; i<rows.length; i++) {
    var cells = rows[i].getElementsByTagName ("td");
    if (cells.length == 3) {
      cells[1].innerHTML = cells[1].innerHTML + " x " + cells[2].innerHTML;
      cells[2].innerHTML = "";
    }
  }
}

// ---------------------------------------------------------------
// Expand the data from the 2nd cell of each row after the " x "
//   into the 3rd cell, so that
//   +--------------+---------------+
//   |  Desktop     |  1024 x 768   |
//   +--------------+---------------+
// becomes
//   +--------------+----------+---------+
//   |  Desktop     |  1024    |   768   |
//   +--------------+----------+---------+
// Note that we also need CSS to show the 3rd column.
// ---------------------------------------------------------------

function expand ()
{
  var headers = document.getElementById ("pixels").getElementsByTagName("th");
  headers[1].innerHTML = "Width";
  headers[2].innerHTML = "Height";
  var rows = document.getElementById ("pixels").getElementsByTagName("tr");
  for (var i=0; i<rows.length; i++) {
    var cells = rows[i].getElementsByTagName ("td");
    if (cells.length == 3) {
      var data = cells[1].innerHTML.split (" x ");
      cells[2].innerHTML = data[1];
      cells[1].innerHTML = data[0];
    }
  }
}

// ---------------------------------------------------------------
// Decide whether to compact or expand, merge data or separate it,
// based on the window width and the current state of the data.
//
// This function gets called on every resize, but it doesn't call
// the compact() or expand() functions unless actually required.
//
// This code could have been compacted but my intent is to make it
// readable by others.
// ---------------------------------------------------------------

function mungeTable()
{
  var pixelTable = document.getElementById ("pixels");
  var tableHeaders = pixelTable.getElementsByTagName ("th");
  var check = tableHeaders[1].innerHTML;
  var thDisplay = window.getComputedStyle(tableHeaders[2]).display;

  if (thDisplay == "none" && check == "Width")
    compact();
  else if (thDisplay != "none" && check != "Width")
    expand();

  // DEBUG - write the current status to a paragraph above the table
  document.getElementById("dim").innerHTML = check + " "
    + window.getComputedStyle(document.getElementById ("tester")).display
    + " " + window.innerWidth + " x " + window.innerHeight;
}

// ---------------------------------------------------------------
// Do the check on page load because we don't know yet what
// device they are viewing on.
// ---------------------------------------------------------------

if (window.addEventListener) { // standard
  window.addEventListener('load', mungeTable, false);
}
else if (window.attachEvent) { // IE
  window.attachEvent('onload', mungeTable);
}

// ---------------------------------------------------------------
// Also triggger on every resize event.  This is necessary if
// different device orientations require different table formats.
// For example, re-orienting my Samsung Galaxy S4 triggers this
// to give me an optimal table either way.
// ---------------------------------------------------------------

window.onresize = mungeTable;