force column vis

Benchmark created on September 26, 2012

Description

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<table id="fooTable">
<thead>
  <tr><th class="priority-low">foo 1</th><th class="priority-medium priority-medium-shown">foo 2</th><th>foo 3</th><th>foo 4</th></tr>
</thead>
<tbody>
<tr><td class="priority-low">foo</td><td class="priority-medium priority-medium-shown">foo</td><td>foo</td><td>foo</td></tr>
<tr><td class="priority-low">foo</td><td class="priority-medium priority-medium-shown">foo</td><td>foo</td><td>foo</td></tr>
<tr><td class="priority-low">foo</td><td class="priority-medium priority-medium-shown">foo</td><td>foo</td><td>foo</td></tr>
<tr><td class="priority-low">foo</td><td class="priority-medium priority-medium-shown">foo</td><td>foo</td><td>foo</td></tr>
<tr><td class="priority-low">foo</td><td class="priority-medium priority-medium-shown">foo</td><td>foo</td><td>foo</td></tr>
<tr><td class="priority-low">foo</td><td class="priority-medium priority-medium-shown">foo</td><td>foo</td><td>foo</td></tr>
<tr><td class="priority-low">foo</td><td class="priority-medium priority-medium-shown">foo</td><td>foo</td><td>foo</td></tr>
<tr><td class="priority-low">foo</td><td class="priority-medium priority-medium-shown">foo</td><td>foo</td><td>foo</td></tr>
<tr><td class="priority-low">foo</td><td class="priority-medium priority-medium-shown">foo</td><td>foo</td><td>foo</td></tr>
<tr><td class="priority-low">foo</td><td class="priority-medium priority-medium-shown">foo</td><td>foo</td><td>foo</td></tr><tr><td class="priority-low">foo</td><td class="priority-medium priority-medium-shown">foo</td><td>foo</td><td>foo</td></tr>
<tr><td class="priority-low">foo</td><td class="priority-medium priority-medium-shown">foo</td><td>foo</td><td>foo</td></tr>
<tr><td class="priority-low">foo</td><td class="priority-medium priority-medium-shown">foo</td><td>foo</td><td>foo</td></tr>
<tr><td class="priority-low">foo</td><td class="priority-medium priority-medium-shown">foo</td><td>foo</td><td>foo</td></tr>
<tr><td class="priority-low">foo</td><td class="priority-medium priority-medium-shown">foo</td><td>foo</td><td>foo</td></tr><tr><td class="priority-low">foo</td><td class="priority-medium priority-medium-shown">foo</td><td>foo</td><td>foo</td></tr>
<tr><td class="priority-low">foo</td><td class="priority-medium priority-medium-shown">foo</td><td>foo</td><td>foo</td></tr>
<tr><td class="priority-low">foo</td><td class="priority-medium priority-medium-shown">foo</td><td>foo</td><td>foo</td></tr>
<tr><td class="priority-low">foo</td><td class="priority-medium priority-medium-shown">foo</td><td>foo</td><td>foo</td></tr>
<tr><td class="priority-low">foo</td><td class="priority-medium priority-medium-shown">foo</td><td>foo</td><td>foo</td></tr><tr><td class="priority-low">foo</td><td class="priority-medium priority-medium-shown">foo</td><td>foo</td><td>foo</td></tr>
<tr><td class="priority-low">foo</td><td class="priority-medium priority-medium-shown">foo</td><td>foo</td><td>foo</td></tr>
<tr><td class="priority-low">foo</td><td class="priority-medium priority-medium-shown">foo</td><td>foo</td><td>foo</td></tr>
<tr><td class="priority-low">foo</td><td class="priority-medium priority-medium-shown">foo</td><td>foo</td><td>foo</td></tr>
<tr><td class="priority-low">foo</td><td class="priority-medium priority-medium-shown">foo</td><td>foo</td><td>foo</td></tr><tr><td class="priority-low">foo</td><td class="priority-medium priority-medium-shown">foo</td><td>foo</td><td>foo</td></tr>
<tr><td class="priority-low">foo</td><td class="priority-medium priority-medium-shown">foo</td><td>foo</td><td>foo</td></tr>
<tr><td class="priority-low">foo</td><td class="priority-medium priority-medium-shown">foo</td><td>foo</td><td>foo</td></tr>
<tr><td class="priority-low">foo</td><td class="priority-medium priority-medium-shown">foo</td><td>foo</td><td>foo</td></tr>
<tr><td class="priority-low">foo</td><td class="priority-medium priority-medium-shown">foo</td><td>foo</td><td>foo</td></tr><tr><td class="priority-low">foo</td><td class="priority-medium priority-medium-shown">foo</td><td>foo</td><td>foo</td></tr>
<tr><td class="priority-low">foo</td><td class="priority-medium priority-medium-shown">foo</td><td>foo</td><td>foo</td></tr>
<tr><td class="priority-low">foo</td><td class="priority-medium priority-medium-shown">foo</td><td>foo</td><td>foo</td></tr>
<tr><td class="priority-low">foo</td><td class="priority-medium priority-medium-shown">foo</td><td>foo</td><td>foo</td></tr>
<tr><td class="priority-low">foo</td><td class="priority-medium priority-medium-shown">foo</td><td>foo</td><td>foo</td></tr><tr><td class="priority-low">foo</td><td class="priority-medium priority-medium-shown">foo</td><td>foo</td><td>foo</td></tr>
<tr><td class="priority-low">foo</td><td class="priority-medium priority-medium-shown">foo</td><td>foo</td><td>foo</td></tr>
<tr><td class="priority-low">foo</td><td class="priority-medium priority-medium-shown">foo</td><td>foo</td><td>foo</td></tr>
<tr><td class="priority-low">foo</td><td class="priority-medium priority-medium-shown">foo</td><td>foo</td><td>foo</td></tr>
<tr><td class="priority-low">foo</td><td class="priority-medium priority-medium-shown">foo</td><td>foo</td><td>foo</td></tr><tr><td class="priority-low">foo</td><td class="priority-medium priority-medium-shown">foo</td><td>foo</td><td>foo</td></tr>
<tr><td class="priority-low">foo</td><td class="priority-medium priority-medium-shown">foo</td><td>foo</td><td>foo</td></tr>
<tr><td class="priority-low">foo</td><td class="priority-medium priority-medium-shown">foo</td><td>foo</td><td>foo</td></tr>
<tr><td class="priority-low">foo</td><td class="priority-medium priority-medium-shown">foo</td><td>foo</td><td>foo</td></tr>
<tr><td class="priority-low">foo</td><td class="priority-medium priority-medium-shown">foo</td><td>foo</td><td>foo</td></tr><tr><td class="priority-low">foo</td><td class="priority-medium priority-medium-shown">foo</td><td>foo</td><td>foo</td></tr>
<tr><td class="priority-low">foo</td><td class="priority-medium priority-medium-shown">foo</td><td>foo</td><td>foo</td></tr>
<tr><td class="priority-low">foo</td><td class="priority-medium priority-medium-shown">foo</td><td>foo</td><td>foo</td></tr>
<tr><td class="priority-low">foo</td><td class="priority-medium priority-medium-shown">foo</td><td>foo</td><td>foo</td></tr>
<tr><td class="priority-low">foo</td><td class="priority-medium priority-medium-shown">foo</td><td>foo</td><td>foo</td></tr>
  </tbody>
</table>

Setup

var $table = $('#fooTable');
    var $hiddenCells = $table.find('.priority-low:not(.priority-low-shown)');
    var $hiddenHeaders = $hiddenCells.filter('th');
    var $revealedCells = $table.find('.priority-medium-shown');
    
    $hiddenCells.attr('style', 'color: green; font-weight: bold;').hide();
    $revealedCells.attr('style', 'color: red; font-weight: bold;').show();

Test runner

$hiddenHeaders.each(function (index, element) {
  var $header = $(this);
  var position = $header.prevAll('th').length;
  $table.find('tbody tr').each(function () {
    var $cells = $(this).find('td:eq(' + position + ')');
    $cells.show();
    // Keep track of the revealed cells, so they can be hidden later.
    // self.$revealedCells = $().add(self.$revealedCells).add($cells);
  });
  $header.show();
  // Keep track of the revealed headers, so they can be hidden later.
  // self.$revealedCells = $().add(self.$revealedCells).add($header);
});

// Find a querySelectorAll compatible way of doing :not().
$table.find('td:not(.priority-low-shown)').addClass('priority-low-shown');

// Strip the 'display:none' declaration from the style attributes of
// the table cells that .hide() added.
  $revealedCells.each(function (index, element) {
  var $cell = $(this);
  var properties = $cell.attr('style').split(';');
  var newProps = [];
  // The hide method adds display none to the element. The element should
  // be returned to the same state it was in before the columns were
  // revealed, so it is necessary to remove the display none
  // value from the style attribute.
  var match =  /^display\s*\:\s*none$/;
  for (var i = 0; i < properties.length; i++) {
    var prop = properties[i];
    prop.trim();
    // Find the display:none property and remove it.
    var isDisplayNone = match.exec(prop);
    if (isDisplayNone) {
      continue;
    }
    newProps.push(prop);
  }
  // Return the rest of the style attribute values to the element.
  $cell.attr('style', newProps.join(';'));
});

$table.find('td.priority-medium-shown').removeClass('priority-medium-shown');

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

• Revision 1: published on September 26, 2012