Editable table

Editable-table.markdown

Editable table

A Pen by victordg on CodePen.

License.

index.html

<table summary="Editable table with datasets ordered in columns">
  <tbody>
    <tr>
      <th></th>
      <th scope="col">Dataset 1</th>
      <th scope="col">Dataset 2</th>
      <th scope="col">Dataset 3</th>
    </tr>
    <tr>
      <th scope="row">January</th>
      <td>16</td>
      <td>65</td>
      <td>4</td>
    </tr>
    <tr>
      <th scope="row">February</th>
      <td>10</td>
      <td>7</td>
      <td>27</td>
    </tr>
    <tr>
      <th scope="row">March</th>
      <td>200</td>
      <td>30</td>
      <td>43</td>
    </tr>
    <tr>
      <th scope="row">April</th>
      <td>73</td>
      <td>101</td>
      <td>22</td>
    </tr>
    <tr>
      <th scope="row">May</th>
      <td>12</td>
      <td>6</td>
      <td>94</td>
    </tr>
  </tbody>
</table>

<br />
<div>
  <strong>table data:</strong>
  <code>click on a cell and edit a number</code>
</div>
<button>reset</button>

script.js

'use strict';

(function () {

  var table = document.querySelector('table');
  var dataCells = table.querySelectorAll('tr > td');
  var rows = table.querySelectorAll('tr');
  var code = document.querySelector('code');
  var resetButton = document.querySelector('button');
  rows = Array.prototype.slice.call(rows, 1);
  var ncols = rows[0].children.length - 1;
   
  var initialData = {0:[1,2,3,4,5],1:[6,7,8,9,10],2:[11,12,13,14,15]};
  
  // extract datasets from table
  function getTableData () {
    var d = {};
    Array.prototype.forEach.call(rows, function (row, i) {
      var rowCells = row.querySelectorAll('td');
      return Array.prototype.map.call(rowCells, function (cell, j) {
        if (!d[j]) d[j] = [];
        d[j].push(parseInt(cell.textContent, 10));
      });
    });
    return d;
  }
   
  // reset table
  function setTableData (data) {
    Array.prototype.forEach.call(rows, function (row, i) {
      var rowCells = row.querySelectorAll('td');
      return Array.prototype.map.call(rowCells, function (cell, j) {
        cell.textContent = initialData[j][i];
      });
    });
    code.innerHTML = JSON.stringify(data);
  }
   
  function initialize () {
    // make data cells editable
    Array.prototype.forEach.call(dataCells, function (cell) {
      cell.contentEditable = true;
    });
     
    // listen for edit events on the data cells
    table.addEventListener('keydown', function (e) {
      if (e.target.tagName === 'TD') {
        setTimeout(function () {
          code.innerHTML = JSON.stringify( getTableData() );
        }, 0);
      }
    });
     
    resetButton.addEventListener('click', setTableData.bind(null, initialData));
  }

  document.addEventListener('DOMContentLoaded', initialize);

})();

style.css

body {
  font-family: 'lucida grande';
  font-size: 0.75em;
}
table {
  border-spacing: 10px;
}
tr > th {
  text-align: right;
  padding-right: 10px;
}
td {
  text-align: center;
  outline: red;
  -webkit-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
          transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
td:hover {
  background: rgba(200, 200, 200, 0.2);
}
td:focus {
  background: #ffff88;
}
code {
  font-size: 1.1em;
}