Merge pull request #2 from Sjord/keep-header

Keep header

tablefilter.js

@@ -1,36 +1,57 @@
 "use strict";
 
 (function () {
- // only show rows that match the input boxes
- function filterTable(table) {
- let rows = table.getElementsByTagName('tr');
- let firstRow = rows[0];
- let filterInputs = firstRow.getElementsByTagName('input');
+
+ // do the cells in `row` contain the strings in `filterValues`?
+ function isMatchingRow(row, filterValues) {
+ let cells = row.children;
+ let rowMatches = true;
+ for (let c = 0; c < Math.min(filterValues.length, cells.length); c++) {
+ let cell = cells[c];
+ let filterValue = filterValues[c];
+ let cellContent = cell.innerText;
+ rowMatches &= cellContent.includes(filterValue);
+ }
+ return rowMatches;
+ }
+
+ // get the string contents of the filter input fields
+ function getFilterValues(filterRow) {
+ let filterInputs = filterRow.getElementsByTagName('input');
 
  let filterValues = [];
  for (let input of filterInputs) {
  filterValues.push(input.value);
  }
+ return filterValues;
+ }
 
- for (let i = 1; i < rows.length; i++) {
- let row = rows[i];
- let cells = row.children;
- let rowMatches = true;
- for (let c = 0; c < Math.min(filterInputs.length, cells.length); c++) {
- let cell = cells[c];
- let filterValue = filterValues[c];
- let cellContent = cell.innerText;
- rowMatches &= cellContent.includes(filterValue);
- }
+ // only show rows that match the input boxes
+ function filterTable(table, filterRow) {
+ let filterValues = getFilterValues(filterRow);
 
- if (rowMatches) {
+ let tbody = table.getElementsByTagName('tbody')[0];
+ let rows = tbody.getElementsByTagName('tr');
+ for (let i = 0; i < rows.length; i++) {
+ let row = rows[i];
+ if (isMatchingRow(row, filterValues)) {
  row.style.display = '';
  } else {
  row.style.display = 'none';
  }
  }
  }
 
+ // get first child element by tag name, or create it if it doesn't exist
+ function getOrCreate(parentElement, tagName) {
+ let childElement = parentElement.getElementsByTagName(tagName)[0];
+ if (childElement === undefined) {
+ childElement = document.createElement(tagName);
+ parentElement.insertBefore(childElement, parentElement.firstChild);
+ }
+ return childElement;
+ }
+
  // add a row with an input box for each column
  function decorateTable(table) {
  let rows = table.getElementsByTagName('tr');
@@ -42,12 +63,14 @@
  let filterCell = document.createElement('td');
  let filterInput = document.createElement('input');
  filterInput.addEventListener("keyup", function () {
- filterTable(table);
+ filterTable(table, filterRow);
  });
  filterCell.appendChild(filterInput);
  filterRow.appendChild(filterCell);
  }
- table.insertBefore(filterRow, table.firstChild);
+
+ let thead = getOrCreate(table, 'thead');
+ thead.appendChild(filterRow);
  }
 
  let tables = document.getElementsByTagName("table");