JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://arkanis.de/projects/table-navigation/jquery.table_navigation.js"></script>
<link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css">
<table class='navigateable table sortable'>
	<thead>
		<tr>
			<th>Name</th>
			<th>Age</th>
			<th>City</th>
			<th>State</th>
			<th>Rank</th>
		</tr>
	</thead>
	<tbody>
		<tr class='test_select'>
			<td>Madhavi</td>
			<td>23</td>
			<td>Bangalore</td>
			<td>Karnataka</td>
			<td><a class='activation' href='#'>First</a></td>
		</tr>
<tr><td colspan='5'></td></tr>

		<tr class='test_select'>
			<td>Anjali</td>
			<td>25</td>
			<td>Tirupathi</td>
			<td>Andhra</td>
			<td><a class='activation' href='#'>Second</a></td>
		</tr>
<tr><td colspan='5'></td></tr>

		<tr class='test_select'>
			<td>Bhaskar</td>
			<td>25</td>
			<td>Hyderabas</td>
			<td>Telengana</td>
			<td><a class='activation' href='#'>Third</a></td>
		</tr>
<tr><td colspan='5'></td></tr>

		<tr class='test_select'>
			<td>Uday</td>
			<td>26</td>
			<td>Bangalore</td>
			<td>Karnataka</td>
			<td><a class='activation' href='#'>Fourth</a></td>
		</tr>
<tr><td colspan='5'></td></tr>

		<tr class='test_select'>
			<td>Kalyan</td>
			<td>24</td>
			<td>Madras</td>
			<td>Chennai</td>
			<td><a class='activation' href='#'>Fifth</a></td>
		</tr>
<tr><td colspan='5'></td></tr>


	</tbody>
</table>

CSS

tr.selected {background-color: red; color: white;}

JavaScript

jQuery.tableNavigation({table_selector: 'table.navigateable', row_selector: 'table.navigateable tbody tr'});