JSFiddle - React, Tailwind, and code Playground

by jcpmcdonald

HTML

<table border=1>
<tr onclick="SelectRow(1)" id="row_1" style='-moz-user-select: none;-webkit-user-select: none;' onselectstart='return false;'>
   <td>
   1 - 1
   </td>
   <td>
   1 - 2
   </td>
   <td>
   1 - 3
   </td>
   <td>
   1 - 4
   </td>
</tr>
<tr onclick="SelectRow(2)" id="row_2" style='-moz-user-select: none;-webkit-user-select: none;' onselectstart='return false;'>
   <td>
   2 - 1
   </td>
   <td>
   2 - 2
   </td>
   <td>
   2 - 3
   </td>
   <td>
   2 - 4
   </td>
</tr>
<tr onclick="SelectRow(3)" id="row_3" style='-moz-user-select: none;-webkit-user-select: none;' onselectstart='return false;'>
   <td>
   3 - 1
   </td>
   <td>
   3 - 2
   </td>
   <td>
   3 - 3
   </td>
   <td>
   3 - 4
   </td>
</tr>
</table>

<div id="debug">

</div>

JavaScript

var currentRow = -1;

function SelectRow(newRowID) {

    debugPrint("yeah");
    if (currentRow == newRowID) {
        return;
    }

    if (currentRow != -1) {
        var oldrow = document.getElementById("row_" + currentRow);
        oldrow.style.background = "#FFF";
    }

    var newRow = document.getElementById("row_" + newRowID);
    newRow.style.background = "#AAF";

    currentRow = newRowID;
}

function IsSelected() {
    return currentRow == -1 ? false : true;
}

function GetSelectedRow() {
    return currentRow;
}

function debugPrint(text) {
    $("#debug").append(text + "<br/>");
}