JSFiddle - React, Tailwind, and code Playground

by Baliga

HTML

<div>
    <table id="tableId" border=1>
      <tbody>
        <tr tabindex="0"><td>Table row 1</td></tr>
        <tr tabindex="0"><td>Table row 2</td></tr>
        <tr tabindex="0"><td>Table row 3</td></tr>
      </tbody>
    </table>
</div>

CSS

table tr:focus{ outline: red solid 2px}

JavaScript

function addRowHandlers() {
    var table = document.getElementById("tableId");
    var rows = table.getElementsByTagName("tr");
    for (i = 0; i < rows.length; i++) {
        var currentRow = table.rows[i];
        var createClickHandler = 
            function(row) 
            {
                return function() { 
                                        var cell = row.getElementsByTagName("td")[0];
                                        var id = cell.innerHTML;
                                        alert("clicked on:" + id);
                                 };
            };

        currentRow.onclick = createClickHandler(currentRow);
    }
}
window.onload = addRowHandlers();