JSFiddle - React, Tailwind, and code Playground

by veer_vin

HTML

<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<table id="content">
  <tr class="test"><td>Select Me as 1</td></tr>
  <tr class="test"><td>Select Me as 2</td></tr>
  <tr class="test"><td>Select Me as 3</td></tr>
  <tr class="test"><td>Select Me as 4</td></tr>
</table>

<p>After Selecting one of the above text refersh the page.</p>
<br>
<a id="check">Click here to highligh previous text</a>

CSS

tr{ cursor:pointer; padding:10px;}
.fcurrent {background-color:green; display:inline-block;}
#check {cursor:pointer; padding:10px;}
p {padding:10px;}

JavaScript

$(document).on('click','#content tr',function(e){
  //$(this).addClass("fcurrent");
  $(this).toggleClass('fcurrent').siblings().removeClass('fcurrent');
  var cls = $(this).attr('class');
  var index = $(this).index() + 1;
  alert(index);
  if (window.sessionStorage) {
    sessionStorage.setItem("cls", cls);
     sessionStorage.setItem("index", index);
    alert(cls);
    
  }
})

$('#check').click(function () {
	var cls = sessionStorage.getItem("cls");
  var index = sessionStorage.getItem("index");
  $('#content tr:nth-child('+index+')').addClass("fcurrent");
  alert(cls);  
});

//$( document ).ready(function() {
	var index = sessionStorage.getItem("index");
  $('#content tr:nth-child('+index+')').addClass("fcurrent");
  alert(cls); 
//});