Javascript.RU

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

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

<!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 в 15:23.
Ответить с цитированием
  #2 (permalink)  
Старый 15.10.2018, 15:39
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,133

Сообщение от madeas
почему при поиске пропадают изображения и ссылки превращаются в простой текст
Ты "смешиваешь" innerHTML и textContent...
Т.о. просто убиваешь свою первоначальную разметку.
Ответить с цитированием
  #3 (permalink)  
Старый 15.10.2018, 15:39
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,133

Сообщение от madeas
Скрипт работает
Смело сказано!

Я так и не понял, по каким элементам должен проходить поиск?
Ответить с цитированием
  #4 (permalink)  
Старый 15.10.2018, 15:51
Аватар для madeas
Профессор
Отправить личное сообщение для madeas Посмотреть профиль Найти все сообщения от madeas
 
Регистрация: 13.04.2018
Сообщений: 212

ksa,
Поиск осуществляется по 2 и 3 столбцам и не должен распространяться на 1 и 4
Ответить с цитированием
  #5 (permalink)  
Старый 15.10.2018, 16:07
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 24,809

madeas,
td = table.querySelectorAll('tbody td:nth-child(2),tbody  td:nth-child(3)');
Ответить с цитированием
  #6 (permalink)  
Старый 15.10.2018, 16:16
Аватар для madeas
Профессор
Отправить личное сообщение для madeas Посмотреть профиль Найти все сообщения от madeas
 
Регистрация: 13.04.2018
Сообщений: 212

работает, но при замене textContent на innerHTML скрипт просто "раскрывает" ссылку на html тег

<!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='http://site.ru/link' title='link 2'>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='http://site.ru/link' title='link 2'>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='http://site.ru/link' title='link 2'>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('tbody td:nth-child(2),tbody  td:nth-child(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.innerHTML.replace(reg, "<span class='hot'>$1</span>")
          });
        });
      });

    </script>
  </body>

</html>

Последний раз редактировалось madeas, 15.10.2018 в 16:20.
Ответить с цитированием
  #7 (permalink)  
Старый 15.10.2018, 16:20
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 24,809

madeas,
исправил
td = table.querySelectorAll('tbody td:nth-child(2) a,tbody  td:nth-child(3)');
Ответить с цитированием
  #8 (permalink)  
Старый 15.10.2018, 16:42
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 24,809

madeas,
кроме строки td = ... менять остальное не нужно
Ответить с цитированием
  #9 (permalink)  
Старый 15.10.2018, 16:54
Аватар для madeas
Профессор
Отправить личное сообщение для madeas Посмотреть профиль Найти все сообщения от madeas
 
Регистрация: 13.04.2018
Сообщений: 212

рони,
сделал, спасибо.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Скрипт некорректно работает. Как можно исправить? antonhauff Javascript под браузер 11 16.01.2018 14:28
Как сделать задержку отображения, пока не отработает скрипт? snovapavel jQuery 3 04.12.2016 07:13
Помогите найти скрипт поиска товаров Pikener Общие вопросы Javascript 2 04.12.2013 07:57
Как правильно поправить скрипт? Я не программист sergant Общие вопросы Javascript 0 15.11.2013 18:32
как составить скрипт автомат или как заменить форму вода Alastor Общие вопросы Javascript 7 28.10.2013 22:14