JSFiddle - React, Tailwind, and code Playground

by srhcan

HTML

<table id="tab1" width="100%" border="1" cellspacing="0" cellpadding="0">
    <tr id="tab1HRow" class="tab1HeaderRow">
        <th>Language Id</th>
        <th>Language Name</th>
    </tr>
    <tr id="tab1DRow1" class="tab1DetailRow" onclick="detailRowClicked(this.id)">
        <td>1</td>
        <td>English<input id="h_id_1" type="hidden" value="1"/></td>
    </tr>
    <tr id="tab1DRow2" class="tab1DetailRow" onclick="detailRowClicked(this.id)">
        <td>2</td>
        <td>French<input id="h_id_2" type="hidden" value="2"/></td>
    </tr>
    <tr id="tab1DRow13" class="tab1DetailRow" onclick="detailRowClicked(this.id)">
        <td>3</td>
        <td>Spanish<input id="h_id_13" type="hidden" value="3"/></td>
    </tr>
</table>

CSS

.tab1HeaderRow {
    background-color: Orange;
}
.tab1DetailRow {
    background-color: Yellow;
}
.tab1DetailRowSelected {
    background-color: SkyBlue;
}

JavaScript

function detailRowClicked(rowId) {
    alert("detailRowClicked(rowId): rowId=" + rowId);
    var rowNumber = rowId.substring(8);
    alert("detailRowClicked(rowId): rowNumber=" + rowNumber);
    var keyValue = document.getElementById("h_id_" + rowNumber).value;
    alert("detailRowClicked(rowId): keyValue=" + keyValue);
    resetDetailRows();
    document.getElementById(rowId).className = "tab1DetailRowSelected";
}

function resetDetailRows() {
    var rows = document.getElementById("tab1").rows;
    for (i = 0; i < rows.length; i++) {
        var row = rows[i];
        // skip the header row
        if (i > 0) {
            document.getElementById(row.id).className = "tab1DetailRow";
        }
    }
}