JSFiddle - React, Tailwind, and code Playground

by srhcan

HTML

<table id="my_table">
    <tbody>
        <tr>
            <td>first row</td>
            <td>first row</td>
            <td>first row</td>
            <td>first row</td>
        </tr>
        <tr>
            <td>second row</td>
            <td>second row</td>
            <td>second row</td>
            <td>second row</td>
        </tr>
        <tr>
            <td>third row</td>
            <td>third row</td>
            <td>third row</td>
            <td>third row</td>
        </tr>
        <tr>
            <td>fourth row</td>
            <td>fourth row</td>
            <td>fourth row</td>
            <td>fourth row</td>
        </tr>
    </tbody>
</table>

CSS

table {
    width: 500px;
    margin: 0 auto;
    font-size: 10px;
    border: 1px solid #ccc;
    border-width: 1px 0 0 1px;
    border-collapse: collapse;
}
caption {
    margin: 0 auto;
    font-size: 12px;
    margin-bottom: 2em;
}
td {
    padding: 10px;
    border: 1px solid #ccc;
    border-width: 0 1px 1px 0;
}
tr:hover td {
    background: #CAEFFD;
    color: #0768B3;
    cursor: pointer;
}

JavaScript

onload = function () {
    if (!document.getElementsByTagName || !document.createTextNode) return;
    var rows = document.getElementById('my_table').getElementsByTagName('tbody')[0].getElementsByTagName('tr');
    for (i = 0; i < rows.length; i++) {
        rows[i].onclick = function () {
            alert(this.rowIndex + 1);
        }
    }
}