Показать сообщение отдельно
  #1 (permalink)  
Старый 15.10.2018, 14:21
Аватар для madeas
Профессор
Отправить личное сообщение для madeas Посмотреть профиль Найти все сообщения от madeas
 
Регистрация: 13.04.2018
Сообщений: 232

Как отладить скрипт поиска?
Всем привет.
Подскажите, как отладить скрипт?

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>

  <body>
    <style>
      #search {
        min-height: 2rem;
        padding-right: 1rem;
        padding-left: 1rem;
        color: #212529 !important;
        border: 1px solid #f2f5f9;
        background-color: #fff;
      }

      span.hot {
        color: #18ad67;
      }

    </style>

    <p><input id="search" type="search" placeholder="Введите наименование или автора">
    </p>

    <table class='table'>
      <thead>
        <th>image</th>
        <th>links</th>
        <th>title</th>
        <th>title</th>
      </thead>
      <tbody>
        <tr>
          <td><img src="https://via.placeholder.com/32x32" alt=""></td>
          <td><a href='#'>link 2</a></td>
          <td>text 3</td>
          <td>text 4</td>
        </tr>
        <tr>
          <td><img src="https://via.placeholder.com/32x32" alt=""></td>
          <td><a href='#'>link 2</a></td>
          <td>text 3</td>
          <td>text 4</td>
        </tr>
        <tr>
          <td><img src="https://via.placeholder.com/32x32" alt=""></td>
          <td><a href='#'>link 2</a></td>
          <td>text 3</td>
          <td>text 4</td>
        </tr>
      </tbody>
    </table>

    <script>
      window.addEventListener('DOMContentLoaded', function() {
        var input = document.querySelector('#search'),
          table = document.querySelector('.table'),
          td = table.querySelectorAll('tr:nth-child(n+1) td:nth-child(-n+3)');
        input.addEventListener('input', function() {
          var val = this.value,
            reg = new RegExp("(" + val + ")", "gi");
          [].forEach.call(document.querySelectorAll('span.hot'), function(el) {
            el.parentNode.replaceChild(document.createTextNode(el.textContent), el)
          });
          val && [].forEach.call(td, function(el) {
            el.innerHTML = el.textContent.replace(reg, "<span class='hot'>$1</span>")
          });
        });
      });

    </script>
  </body>

</html>


Скрипт работает, но не могу понять, почему при поиске пропадают изображения и ссылки превращаются в простой текст.
Поиск осуществляется по 2 и 3 столбцам

Последний раз редактировалось madeas, 15.10.2018 в 14:23.
Ответить с цитированием