javascript - 想知道如何从特定的(嵌套的、表中的表)表标题中过滤结果吗？

Question

一直在研究这段代码，只有我能接受一些输入。如果可能的话，真的可以用一个后续的工作示例来改变代码片段。需要计算过滤器/搜索 - 返回结果仅限于指定的表标题('th/tr' - 标签)，即标题标题并仅在该区域内搜索，但仍显示整个单元格(标题，描述和日期) ).如有任何问题，我将很乐意提供帮助。

var input, table, rows, noMatches, markInstance;

$(document).ready(function init() {
  input = document.getElementById('myInput');
  noMatches = document.getElementById('noMatches');
  table = document.getElementById('myTable');
  rows = table.querySelectorAll('tr');
  markInstance = new Mark(table);
  input.addEventListener('keyup', _.debounce(ContactsearchFX, 250));
});

function ContactsearchFX() {
  resetContent();
  markInstance.unmark({
    done: highlightMatches
  });
}

function resetContent() {
  $('.noMatchErrorText').remove();
  //Remove this line to have a log of searches

  //noMatches.textContent = '';
  rows.forEach(function(row) {
    $(row).removeClass('show');
  });
}

function highlightMatches() {
  markInstance.mark(input.value, {
    each: showRow,
    noMatch: onNoMatches,
  })
}

function showRow(element) {
  //alert(element);
  $(element).parents('tr').addClass('show');
  $(element).parents('tr').siblings('tr').addClass('show');
  //Parents incase of several nestings
}

function onNoMatches(text) {
  $('#myInput').after('<p class="noMatchErrorText">No records match: "' + text + '"</p>');
}

.input-wrap {
  margin-bottom: 12px;
}

#myInput:invalid~.hints {
  display: block;
}

#noMatches:empty,
#noMatches:empty+.hints {
  display: none;
}

.style1 tr {
  display: none;
}

.style1 .show {
  display: table-row;
}

mark {
  background: orange;
  font-weight: bold;
  color: black;
}

.style1 {
  text-align: left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/mark.min.js"></script>
<div class="input-wrap">
  <label>
    Search Titles: 
    <input id="myInput" type="text" required
       placeholder="Search Titles" />
    </label>
</div>
<div class="hintsWrap">
  <p id="noMatches"></p>
  <p class="hints">
    Hints: type "Title1", "Title2", "Title3"...
  </p>
</div>
<br />
<br />
<table id="myTable" style="width: 100%" class="style1">
  <tr>
    <td>
      <br />
      <br />
      <br />
      <table style="width: 100%">
        <tr>
          <th class="style1">Title</th>
          <td>title1</td>
        </tr>
        <tr>
          <th class="style1">Description</th>
          <td>description1</td>
        </tr>
        <tr>
          <th class="style1">Date</th>
          <td>date1</td>
        </tr>
      </table>
      <br />
      <table style="width: 100%">
        <tr>
          <th class="style1">Title</th>
          <td>title2</td>
        </tr>
        <tr>
          <th class="style1">Description</th>
          <td>description2</td>
        </tr>
        <tr>
          <th class="style1">Date</th>
          <td>date2</td>
        </tr>
      </table>
      <br />
      <br />
      <table style="width: 100%">
        <tr>
          <th class="style1">Title</th>
          <td>title3</td>
        </tr>
        <tr>
          <th class="style1" style="height:      23px">Description</th>
          <td style="height: 23px">description3</td>
        </tr>
        <tr>
          <th class="style1">Date</th>
          <td>date3</td>
        </tr>
      </table>
      <br />
      <br />
      <table style="width: 100%">
        <tr>
          <td>
            <table style="width: 100%">
              <tr>
                <th class="style1">Title</th>
                <td>title4</td>
              </tr>
              <tr>
                <th class="style1">Description</th>
                <td>description4</td>
              </tr>
              <tr>
                <th class="style1">Date</th>
                <td>date4</td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
      <br />
    </td>
  </tr>
</table>

Answer 1

作为上述评论的延续，自 this 以来是你想使用的基本东西，我把它贴在这里。我在代码上添加了一些注释，但本质是:

1. 这只是一种非常基本的方法，没有使用任何库。
2. 我使用类来隐藏表格行并标记结果
3. 虽然我在脚本中保留了 display: none; 表格行的部分，但您可以操作 CSS 并将其从代码中删除。

function myFunction() {
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.querySelectorAll("tbody > tr");
  for (i = 0; i < tr.length; i++) {   // Loop through all table rows, and hide those who don't match the search query
    td = tr[i].getElementsByTagName("td")[0]; // this will search on the Title col. You can change this to search on other cols.
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) { // found
        tr[i].style.display = ""; 
        tr[i].classList.add("mark"); // mark result
      } 
      else { // didn't found
        tr[i].style.display = "none";
        tr[i].classList.remove("mark"); // unmark result
      }
    }
    if (input.value === '') { // case the input is clear
      tr[i].classList.remove("mark"); // unmark result
      tr[i].style.display = "none";    
    }    
  }
}

  table {position: relative; min-width: 320px;} /*  */
  tbody tr {opacity: 0;} /* this will hide the table's info + will show the result under the headers */
  tr.mark {opacity: 1;} /* this will show the result row */ 
/* basic style (markers) to the result row - just for demonstration purpose */
  tr.mark td {background: yellow;} /* (second) col */
  tr.mark td:first-child {background: blue;} /* first col */
  tr.mark td:last-child {background: orange;} /* third  col*/

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search Titles..">
<table id="myTable">
  <thead>  
    <tr>
      <th>Title</th>
      <th>Description</th>
      <th>Date</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>bla bla bla</td>
      <td>description1</td>
      <td>date1</td>
    </tr>
    <tr>
      <td>yada yada yada</td>
      <td>description2</td>
      <td>date2</td>
    </tr>
    <tr>
      <td>Another Title</td>
      <td>description3</td>
      <td>date3</td>
    </tr>
  </tbody>
</table>

希望它是您搜索的内容，享受代码!