$(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");
}
});
$("#next").click(function () {
var currentIndex = $(".css").index();
if (currentIndex < (rowCount - 1))
$(".css").removeClass("css").next().addClass("css");
else
alert("Next does not exist !!");
});
});
<html>
<head>
<title>next</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="next" value="Next" />
<input type="button" id="reset" value="Reset" onclick="location.reload()" />
</body>
</html>
.css
{
background-color:aqua;
}