I have this javascript which searches all fields in an html table, for an input text, then displays rows which matches and hides those that does not. I want to further highlight the search string in the displayed rows. How to do it in a simple way by changing this script :

<script>
function myFunction(){
  // Declare variables 
  var input, filter, table, tr, td, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");

  // Loop through all table rows, and hide those who do not match the search query
  for (i = 1; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td") ; 
    for(j=0 ; j<td.length ; j++)
    {
      var tdata = td[j] ;
      if (tdata) {
        if (tdata.innerHTML.toUpperCase().indexOf(filter) > -1) {
          tr[i].style.display = "";
          break ; 
        } else {
          tr[i].style.display = "none";
        }
      } 
    }
  }
}
</script>

Also, here is a sample html table file with this javascript embedded on top : https://sourceforge.net/projects/my-project-files/files/marks.html/download

Please help me with the revised and tested script. I am a newbie at javascript. Thanks.