JSFiddle - React, Tailwind, and code Playground

by urashita

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<button id='btn_next'>Next</button>
<table id='table_one'>
    <tr>
        <th>col 1</th>
        <th>col 2</th>
        <th>col 3</th>
    </tr>
    <tr>
        <td>one 1</td>
        <td>one 2</td>
        <td>one 3</td>
    </tr>
    <tr>
        <td>two 1</td>
        <td>two 2</td>
        <td>two 3</td>
    </tr>
    <tr>
        <td>three 1</td>
        <td>three 2</td>
        <td>three 3</td>
    </tr>
    <tr>
        <td>four 1</td>
        <td>four 2</td>
        <td>four 3</td>
    </tr>
    <tr>
        <td>five 1</td>
        <td>five 2</td>
        <td>five 3</td>
    </tr>
</table>

CSS

.active {
    background-color: #F5D7E3;
}
table {
    font-family: verdana, arial, sans-serif;
    font-size:11px;
    color:#333333;
    border-width: 1px;
    border-color: #666666;
    border-collapse: collapse;
}
table th {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #666666;
    background-color: #dedede;
}
table td {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #666666;
    background-color: #ffffff;
}

JavaScript

$("#table_one").on("click", "tr", function () {
     $(".active").removeClass("active");

     $(this).children("td").addClass("active");
     $(this).children("tr").addClass("active");
 });

 $('#btn_next').on('click', function () {
     var curr;
     curr = ($('td.active').parent().index('tr') == -1) ? 0:$('td.active').parent().index('tr');
     $(".active").removeClass("active");
     $('tr').eq(curr + 1).children("td").addClass("active");
 });