Добавьте маркер в поиск / фильтр таблиц Javascript

#javascript #html-table

Вопрос:

У меня есть этот javascript, который ищет все поля в таблице html для ввода текста, затем отображает строки, которые соответствуют, и скрывает те, которые не соответствуют. Я хочу дополнительно выделить строку поиска в отображаемых строках. Как это сделать простым способом, изменив этот скрипт :

 <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>
 

Кроме того, вот пример файла таблицы html с этим javascript, встроенным сверху : https://sourceforge.net/projects/my-project-files/files/marks.html/download

Пожалуйста, помогите мне с переработанным и протестированным сценарием. Я новичок в javascript. Спасибо.

Комментарии:

1. Используйте найденный индекс, найдите конечный индекс фильтра и используйте его для вставки mark тега вокруг фильтра. Вы также можете использовать регулярное выражение, созданное на основе значения фильтра, и использовать String.prototype.replace его во внутреннем html-файле для обертывания фильтра mark .