JSFiddle - React, Tailwind, and code Playground

by Karan1412

HTML

<html>
        <head>
        <title>prev</title>
        </head>
        <body>
        <table border="1">
        <caption>Players</caption>
        <tr>
        <th>Name</th>
        <th>Club</th>
        <th>Height</th>
        <th>Position</th>
        </tr>
        <tr>
        <td>Thierry Henry</td>
        <td>New York Red BUlls</td>
        <td>186 cm</td>
        <td>Forward</td>
        </tr>
        <tr>
        <td>Cesc Fabregas</td>
        <td>FC Barcelona</td>
        <td>176 cm</td>
        <td>Midfield</td>
        </tr>
        <tr>
        <td>Santiago Cazorla</td>
        <td>Arsenal FC</td>
        <td>168 cm</td>
        <td>Midfield</td>
        </tr>
        <tr>
        <td>Laurent Kocielny</td>
        <td>Arsenal FC</td>
        <td>186 cm</td>
        <td>Defecnce</td>
        </tr>
        <tr>
        <td>Tomas Rocisky</td>
        <td>Arsenal FC</td>
        <td>176 cm</td>
        <td>Midfield</td>
        </tr>
        </table>
        <br /><br />
        <input type="text" id="rowNum" />
        <input type="button" id="selectRow" value="Select Row" />
        <input type="button" id="prev" value="Prev" />
        <input type="button" id="reset" value="Reset" onclick="location.reload()" />
        </body>
        </html>

CSS

.css
        {
        background-color:aqua;
        }

JavaScript

$(document).ready(function () {
                var rowNum;
                var rowCount;
                $("#selectRow").click(function () {
                    rowNum = $("#rowNum").val();
                    rowCount = $("tr").length;
                    if (rowNum < rowCount) {
                        $("tr:eq(" + rowNum + ")").addClass("css");
                    }
                    else {
                        alert("Enter valid row. Index start from 0");
                    }
                });
                $("#prev").click(function () {
                    var currentIndex = $(".css").index();
                    if (currentIndex != 0)
                        $(".css").removeClass("css").prev().addClass("css");
                    else
                        alert("prev does not exist !!");
                });
            });