Невозможно найти / отфильтровать таблицу, если в строке данных есть «&» - PullRequest
Новая
       17

Невозможно найти / отфильтровать таблицу, если в строке данных есть «&»

0 голосов
/ 23 октября 2019

У меня есть HTML-таблица с 7 столбцами и более 6000 строк.

Я искал в Интернете код JavaScript и немного подправил, чтобы выполнить функцию поиска и фильтрации для моей HTML-таблицы, и она работает нормально!

Единственная проблема - с символом '&'. Везде, где это «&» существует в данных, оно не ищет после «&».

Например, в данных примера есть столбец «Koniglich & Essen» в столбце имени клиента. Поэтому, когда я начну печатать, он будет показывать результат, пока я не наберу 'Koniglich &'. После того, как я наберу 'E ....', результат исчезнет.

Ниже приведен пример страницы.

https://www.w3schools.com/code/tryit.asp?filename=G99OS1TL3YD0

Ниже приведен код JavaScript, который я использую дляфильтровать данные. 

<script>
function myFunction() {
  var input, filter, table, tr, td, i,
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }       
  }
}
</script>

Ответы [ 2 ]

0 голосов
/ 24 октября 2019

Вы должны проверить textContent каждой ячейки таблицы вместо innerHTML, которая экранирует специальные символы в сущности HTML;& будет изменено на &amp;

Изменение: 

if (td.innerHTML.toUpperCase().indexOf(filter) > -1)

На 

if (td.textContent.toUpperCase().indexOf(filter) > -1)

Рабочая демонстрация: https://jsfiddle.net/jvd4wfoh/

0 голосов
/ 23 октября 2019

Вы изучаете innerHTML, поэтому & будет представлен как &amp;, когда браузер преобразует его в HTML.

A console.log(td.innerHTML) выделит это.

Вам, вероятно, было бы лучше изучить textContent.

...