JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<table>
    <thead>
        <tr>
            <th>Col 1</th>
            <th>Col 2</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        <tr data-href="#clicked1">
            <td>text</td>
            <td>text</td>
            <td><a href="#">Edit</a> <a href="#">Delete</a></td>
        </tr>
        <tr class="even" data-href="#clicked2">
            <td>text</td>
            <td>text</td>
            <td><a href="#">Edit</a> <a href="#">Delete</a></td>
        </tr>
    </tbody>
</table>

CSS

table {
    width: 100%;
    border-collapse: collapse;
    -webkit-box-shadow: 0px 1px 1px rgba(0,0,0,.25);
}
td, th {
    padding: 5px 10px;
}
thead th {
    background: #110303;  
    color: #fff;
}
tbody tr {
    border-top: 1px dotted #D8D5D5;
}
tbody td {
    border: 1px dotted #D8D5D5;
    border-width: 0px 1px;
}
tbody tr:first-child {
    border-top: none;
}
tbody tr.even td {
    background: #fbfbfb;
}
tbody tr.clickable:hover td {
    background: #ecf2fa;
    cursor: pointer;
}
tbody tr.clickable.active td {
    background: #fff2fa;
    cursor: pointer;
}

JavaScript

$('tbody tr[data-href]').addClass('clickable').click(function() {
    $(".clickable").removeClass("active");
    href = $(this).attr('data-href');
    alert(href);
    $(this).addClass("active");
}).find('a').hover(function() {
    $(this).parents('tr').unbind('click');
}, function() {
    $(this).parents('tr').click(function() {
        $(".clickable").removeClass("active");
        href = $(this).attr('data-href');
        alert(href);
        $(this).addClass("active");
    });
});