javascript - 想知道如何过滤嵌套表格吗？

Question

我在集成过滤器代码片段方面取得了一些成功。我发现的问题是，过滤器似乎不会在我的数据表上出现，这些数据表只能作为嵌套表插入。不太了解 JavaScript/CSS，我想知道是否可以解决这个问题。

JavaScript

var input, table, rows, noMatches, markInstance;


window.onload = 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));

var input, table, rows, noMatches, markInstance;


window.onload = 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() {

 noMatches.textContent = '';



  rows.forEach(function(row) {

    row.classList.remove('show');

  });

}



function highlightMatches() {

  markInstance.mark(input.value, {

    each: showParantRow,

    noMatch: onNoMatches,

  })

}



function showParantRow(element) {

  var row = element.closest('tr');

  row.classList.add('show');

}



function onNoMatches(text) {

  noMatches.textContent = 'No records match: "' + text + '"';

};

.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;

}

<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 "not working", "working" ...

  </p>

</div>



<table id="myTable" style="width: 100%" class="style1">

  <tr>

    <td>

    <table><tr><td>not working</td></tr></table>  

    </td>

  </tr>

  <tr>

    <td>

    working

    </td>

  </tr>

</table>

Answer 1

您会看到显示带有标题搜索的整个表格的问题。 (我使用的是您发送的相同 JavaScript 和 CSS)感谢 Seraphendipity，我期待您的进一步投入。

HTML

<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>



<table id="myTable" style="width: 100%" class="style1">
  <tr>
    <td>

        <br />

    <table style="width: 100%">
        <tr>
            <td>Title1</td>
        </tr>
        <tr>
            <td>
            <img data-src-                        hq="/th?id=ODL.53f33f407ba28930afd14f3d9390813c&amp;w=197&amp;        h=110&amp;c=7&amp;rs=1&amp;qlt=80&amp;dpr=1.76&amp;pid=RichNav"     alt="Iran seizes 'fuel-smuggling' tanker in Gulf" data-    priority="2" id="emb6E9DDF7A" class="rms_img"         src="https://www.bing.com        /th?id=ODL.53f33f407ba28930afd14f3d9390813c&amp;w=197&amp;h=110&    amp;c=7&amp;rs=1&amp;qlt=80&amp;dpr=1.76&amp;pid=RichNav" data-        bm="50" width="197" height="110" />Description1</td>
        </tr>
        <tr>
            <td>Date1</td>
        </tr>
    </table>
    </td>
</tr>
</table>

    <br />



<table id="myTable0" style="width: 100%" class="style1">
  <tr>
    <td>

    <br />

    <table style="width: 100%">
        <tr>
            <td>Title2</td>
        </tr>
        <tr>
            <td>
            <img data-src-    hq="/th?id=ODL.22386d3e20f0b540ee8cc4874bdd4ba4&amp;w=197&amp;h=110&amp;c=7&amp;rs=1&amp;qlt=80&amp;dpr=1.76&amp;pid=RichNav" alt="Flying ants: Swarms appear on weather map as 'rain'" data-priority="2" id="emb13B6D9078" class="rms_img" src="https://www.bing.com/th?id=ODL.22386d3e20f0b540ee8cc4874bdd4ba4&amp;w=197&amp;h=110&amp;c=7&amp;rs=1&amp;qlt=80&amp;dpr=1.76&amp;pid=RichNav" data-bm="51" width="197" height="110" />Description2</td>
        </tr>
        <tr>
            <td>Date2</td>
        </tr>
    </table>
    </td>
</tr>
</table>

    <br />



<table id="myTable1" style="width: 100%" class="style1">
  <tr>
            <td>&nbsp;</td>
        </tr>
  <tr>
    <td>

    <br />

    <table style="width: 100%">
        <tr>
            <td>Title3</td>
        </tr>
        <tr>
            <td>
            <img data-src-        hq="/th?id=ODL.c9ffada4f6eedff438c5c3c2c26b73f4&amp;w=197&amp;h=110&amp;c=7&amp;rs=1&amp;qlt=80&amp;dpr=1.76&amp;pid=RichNav" alt="MPs back bid to block Parliament suspension" data-priority="2" id="emb27B566CEC" class="rms_img" src="https://www.bing.com/th?id=ODL.c9ffada4f6eedff438c5c3c2c26b73f4&amp;w=197&amp;h=110&amp;c=7&amp;rs=1&amp;qlt=80&amp;dpr=1.76&amp;pid=RichNav" data-bm="52" width="197" height="110" />Description3</td>
        </tr>       <tr>
            <td>Date3</td>
        </tr>
    </table>
    <br />
    </td>
</tr>
</table>