JSFiddle - React, Tailwind, and code Playground

by srhcan

HTML

<body class="backgroundColor_LightGrey">
    <form id="form_role_list" action="">
        <table width="100%" border="1" cellspacing="0" cellpadding="0">
            <tr class="backgroundColor_Orange">
                <th>Role Id</th>
                <th>Role Name</th>
                <th>Role Description</th>
            </tr>
            <tr id="rowData1" class="backgroundColor_Yellow" onclick="rowDataClicked(this.id)">
                <td>12</td>
                <td>SELF_SERVICE</td>
                <td>Self Service</td>
            </tr>
            <tr id="rowData2" class="backgroundColor_Yellow" onclick="rowDataClicked(this.id)">
                <td>13</td>
                <td>ADMIN</td>
                <td>Administrator</td>
            </tr>
        </table>
    </form>
</body>

CSS

.backgroundColor_Orange {
    background-color: Orange;
}
.backgroundColor_Yellow {
    background-color: Yellow;
}
.backgroundColor_LightGrey {
    background-color: #D3D3D3;
}
.backgroundColor_SkyBlue {
    background-color: SkyBlue;
}

JavaScript

function rowDataClicked1(rowClicked) {
    alert("rowDataClicked1(rowClicked): inside: rowClicked=" + rowClicked);
}

function rowDataClicked(rowId) {
    alert("rowDataClicked(rowId): inside: rowId=" + rowId);
    alert("rowDataClicked(rowId): inside: row=" + document.getElementById(rowId));
    document.getElementById(rowId).className = "backgroundColor_SkyBlue";
    
    
}