Как выделить слова в таблице с помощью фильтра? - PullRequest
Новая
       13

Как выделить слова в таблице с помощью фильтра?

0 голосов
/ 10 февраля 2019

Я хочу создать таблицу с фильтром, который выделяет ключевые слова, которые были найдены при отображении результатов поиска.

Мне нравится ответ на этот вопрос: в режиме реального времени выделите слово (а)с jQuery , но я не мог понять, как реализовать его в моем существующем коде. 

function myFunction() {
  // Declare variables
  var input, filter, table, tr, td, i, txtValue;
  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 don't match the search query
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search...">
<table id="myTable">
  <tr>
    <td>
       <h1>Text</h1>
       <p><span class="red">Text</span></p>
       <p>Text</p>
    </td>
    <td><img src=".."></td>
  </tr>
  <td>
       <h1>Text</h1>
       <p><span class="red">Text</span></p>
       <p>Text</p>
    </td>
    <td><img src=".."></td>
</table>

1 Ответ

0 голосов
/ 10 февраля 2019

Не могли бы вы попробовать это 

function createTagAndAppendTo(tag, txt, elem){
  let customTag = document.createElement(tag);
  customTag.textContent = txt;
  elem.append(customTag);
}

function myFunction(evt) {
  // Declare variables
  let input, filter, table, tr, td, i, txtValue;
  let displayTr = [];
  filter = evt.value;
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  let regExp = new RegExp(filter);
  if (!filter) {
    for (let i = 0; i < tr.length; i++) {
      tr[i].style.display = '';
    }
    return;
  }

  // Loop through all table rows, and hide those who don't match the search query
  for (let i = 0; i < tr.length; i++) {
    let trStyle = tr[i].style.display;
    td = tr[i].getElementsByTagName("td");
    for (let j = 0; j < td.length; j++) {

        txtValue = td[j].textContent;

        let count = (txtValue.match(regExp) || []).length;
        displayTr[i] = displayTr[i] ? displayTr[i] : count;
        if (count !== 0) {
          
          td[j].innerText = '';
          let strArray = txtValue.split(filter);
          let loopLength = strArray.length - 1;

          for (let i = 0; i < loopLength; i++) {
            createTagAndAppendTo('span', strArray[i], td[j]);
            createTagAndAppendTo('mark', filter, td[j]);
          }
          createTagAndAppendTo('span', strArray[loopLength], td[j]);
          
        } else {
          let tdStr = td[j].textContent;
          td[j].innerText = '';
          td[j].textContent = tdStr;
          
        }
      }
    
    if(displayTr[i] !== 0) {
      tr[i].style.display = '';
    } else {
       tr[i].style.display = 'none';
    }
  }
}
<input type="text" id="myInput" onkeyup="myFunction(this)" placeholder="Search...">
<table id="myTable">
  <tr>
    <td>...</td>
    <td>success</td>
    <td>Substring</td>
  </tr>
  <tr>
    <td>...</td>
    <td>...</td>
    <td>...</td>
  </tr>
</table>
...