0

I used following code to highlight multiple record rows in a table. When I click button rows selected.But I refresh the page highlight disappeared. Can somebody help me how to remain the highlighted record even page is refreshed.

<script>
function highlight(ctrl) {
  var parent = ctrl.parentNode.parentNode;

  if(parent.classList == "New backChange") {
    parent.classList.remove("backChange");
  }
  else {
    parent.classList.add("backChange");
  }
}
</script>

<style>
.backChange{
    background:red;
}
</style>
<table id="appTable" style="margin-top:10px;" margin-left:10px;="" border="1">
  <tbody>
    <tr>
      <th>Select</th>
      <th>Name</th>
      <th>Location</th>
      <th>Action</th>
    </tr>
    <tr class="New">
      <td><input id="mapCheck" name="myTextEditBox" type="checkbox"></td>
      <td width="140">Name</td>
      <td width="200">Location</td>
      <td><button type="button" onclick="highlight(this)">select</button></td>
    </tr>
    <tr class="New">
      <td><input id="mapCheck" name="myTextEditBox" type="checkbox"></td>
      <td width="140">Name</td>
      <td width="200">Location</td>
      <td><button type="button" onclick="highlight(this)">select</button></td>
    </tr>
    <tr class="New">
      <td><input id="mapCheck" name="myTextEditBox" type="checkbox"></td>
      <td width="140">Name</td>
      <td width="200">Location</td>
      <td><button type="button" onclick="highlight(this)">select</button></td>
    </tr>
    <tr class="New">
      <td><input id="mapCheck" name="myTextEditBox" type="checkbox"></td>
      <td width="140">Name</td>
      <td width="200">Location</td>
      <td><button type="button" onclick="highlight(this)">select</button></td>
    </tr>
  </tbody>
</table>

enter image description here

Dushee
  • 255
  • 5
  • 17

1 Answers1

0

because className is reset when the page is refreshed. you can use localStorage save and read value when page is refreshed

this is usage of localStoeage

Kermit
  • 1,062
  • 6
  • 10
  • Please can you explain this thing. I tried as follows, But it did not worked var parent = localStorage.ctrl.parentNode.parentNode; – Dushee Jul 22 '17 at 04:57