Columns Painter 🏛🖍

columns-painter.markdown

Columns Painter 🏛🖍

A Pen by Mariano Viola on CodePen.

License.

index.html

<table>
  <caption>Favorite and Least Favorite Things</caption>
  <tbody>
    <tr>
      <th></th>
      <th></th>
      <th>Bob</th>
      <th>Alice</th>
    </tr>
    <tr>
      <th rowspan="2">Favorite</th>
      <th>Color</th>
      <td>Blue</td>
      <td>Purple</td>
    </tr>
    <tr>
      <th>Flavor</th>
      <td>Banana</td>
      <td>Chocolate</td>
    </tr>
    <tr>
      <th rowspan="2">Least<br>Favorite</th>
      <th>Color</th>
      <td>Yellow</td>
      <td>Pink</td>
    </tr>
    <tr>
      <th>Flavor</th>
      <td>Mint</td>
      <td>Walnut</td>
    </tr>
  </tbody>
</table>

script.babel

const rows = document.querySelectorAll('table tr')

const maxCells = Math.max(...Array.from(rows).map(row => row.children.length));
const cell = 1;
const color = 'pink';

let span = null;
let spanner = null;

rows.forEach((row, i) => {
  const currentCell = row.children[cell];
  const cellsNo = row.children.length;
  const diff = maxCells - cellsNo;

  if (currentCell && currentCell.hasAttribute('rowspan')) {
    span = parseInt(currentCell.getAttribute('rowspan'));
    spanner = i;
    currentCell.style.backgroundColor = color;
  }

  if (span && i > spanner + span) {
    currentCell.style.backgroundColor = color;
  }

  if (!span) {
    const trueCell = cell > 0 ? cell - diff : cell;
    row.children[trueCell].style.backgroundColor = color;
  }
});

style.postcss

table {
  border-collapse: collapse;
  color: darkviolet;
}

table, th, td {
    border: 1px solid pink;
}

td, th, caption {
  padding: 10px;
}