JSFiddle - React, Tailwind, and code Playground

by scottymo

HTML

<table border=1>
    <tr>
        <td class="selectable" id="cell_1_1">Cell 1,1</td>
        <td class="selectable" id="cell_1_2">Cell 1,2</td>
        <td id="cell_1_3">Cell 1,3</td>
    </tr>
    <tr>
        <td class="selectable" id="cell_2_1">Cell 2,1</td>
        <td id="cell_2_2">Cell 2,2</td>
        <td class="selectable" id="cell_2_3">Cell 2,3</td>
    </tr>
</table>

CSS

td { padding: 5px; background:white }
td.selectable { cursor: pointer; }
td.selectable:hover { color: white; background: blue; }

JavaScript

function getElementsByClassName(node,classname) {
  if (node.getElementsByClassName) { // use native implementation if available
    return node.getElementsByClassName(classname);
  } else {
    return (function getElementsByClass(searchClass,node) {
        if ( node == null )
          node = document;
        var classElements = [],
            els = node.getElementsByTagName("*"),
            elsLen = els.length,
            pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)"), i, j;

        for (i = 0, j = 0; i < elsLen; i++) {
          if ( pattern.test(els[i].className) ) {
              classElements[j] = els[i];
              j++;
          }
        }
        return classElements;
    })(classname, node);
  }
}

function myFunction(cellID) {
    alert(cellID);           
}

var cells = getElementsByClassName(document,'selectable');
for (var i=0; i<cells.length; i++) {
    cells[i].onclick = function() { myFunction(this.id); };
}