JSFiddle - React, Tailwind, and code Playground

by lun471k

HTML

<button>show me a ray !</button>
<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
        <tr data-id="1"><td>My Item 1</td><td>$49.99</td></tr>
        <tr data-id="2"><td>My Item 2</td><td>$49.99</td></tr>
        <tr data-id="3"><td>My Item 3</td><td>$49.99</td></tr>
        <tr data-id="4"><td>My Item 4</td><td>$49.99</td></tr>
        <tr data-id="5"><td>My Item 5</td><td>$49.99</td></tr>
        <tr data-id="6"><td>My Item 6</td><td>$49.99</td></tr>
    </tbody>
   
</table>

CSS

table, table tr, table td
{
    border-collapse:collapse;
}
tbody tr{
    border:1px solid black;
    width: 500px;
}
tbody tr:hover
{
    background-color:#CCC;
    cursor:pointer
}

tbody tr:active{
    color:#AAA
}

td{ width: 300px; text-align:center}

JavaScript

console.log("loaded");

trArray = [];
var tbody = document.getElementsByTagName("tbody")[0];
var button = document.getElementsByTagName("button")[0];
button.onclick = function(){
    alert(trArray.sort().toString());
}

for (tr in tbody.childNodes)
{
    if(tbody.childNodes[tr].nodeType != 1)
        continue;
    tbody.childNodes[tr].onclick = function(){
        var rowID = this.getAttribute("data-id");
        if(trArray.indexOf(rowID) > -1)
        {
            trArray.splice(window.trArray.indexOf(rowID),1);
            this.style.backgroundColor = "white";
        }
        else
        {
            trArray.push(rowID);
            this.style.backgroundColor = "#00bfff";
        }
    }
}