如何使用簡單的javascript過濾html表？

Question

我有一個代碼來過濾表格。 它將僅基於第一列進行過濾。 如何讓它單獨過濾第二列。 另外如何過濾完整的表格？

我無法弄清楚這樣做的方法。 我試圖在沒有任何其他外部庫的情況下獲得幫助。

 <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name"> <table id="myTable"> <tr class="header"> <th style="width:60%;">Name</th> <th style="width:40%;">Country</th> </tr> <tr> <td>Alfreds Futterkiste</td> <td>Germany</td> </tr> <tr> <td>Berglunds snabbkop</td> <td>Sweden</td> </tr> <tr> <td>Island Trading</td> <td>UK</td> </tr> <tr> <td>Koniglich Essen</td> <td>Germany</td> </tr> <tr> <td>Laughing Bacchus Winecellars</td> <td>Canada</td> </tr> <tr> <td>Magazzini Alimentari Riuniti</td> <td>Italy</td> </tr> <tr> <td>North/South</td> <td>UK</td> </tr> <tr> <td>Paris specialites</td> <td>France</td> </tr> </table> <script> function myFunction() { var input, filter, table, tr, td, i; input = document.getElementById("myInput"); filter = input.value.toUpperCase(); table = document.getElementById("myTable"); tr = table.getElementsByTagName("tr"); for (i = 0; i < tr.length; i++) { td = tr[i].getElementsByTagName("td")[0]; if (td) { if (td.innerHTML.toUpperCase().indexOf(filter) > -1) { tr[i].style.display = ""; } else { tr[i].style.display = "none"; } } } } </script>

JS小提琴

Answer 1

你可以做：

 const myFunction = () => { const trs = document.querySelectorAll('#myTable tr:not(.header)'); const filter = document.querySelector('#myInput').value; const regex = new RegExp(filter, 'i'); const isFoundInTds = (td) => regex.test(td.innerHTML); const isFound = (childrenArr) => childrenArr.some(isFoundInTds); const setTrStyleDisplay = ({ style, children }) => { style.display = isFound([...children]) ? '' : 'none'; }; trs.forEach(setTrStyleDisplay); };

 input#myInput { width: 220px; } table#myTable { width: 100%; } table#myTable th { text-align: left; padding: 20px 0 10px; }

 <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names or countries.." title="Type in a name or a country"> <table id="myTable"> <tr class="header"> <th style="width:60%;">Name</th> <th style="width:40%;">Country</th> </tr> <tr> <td>Alfreds Futterkiste</td> <td>Germany</td> </tr> <tr> <td>Berglunds snabbkop</td> <td>Sweden</td> </tr> <tr> <td>Island Trading</td> <td>UK</td> </tr> <tr> <td>Koniglich Essen</td> <td>Germany</td> </tr> <tr> <td>Laughing Bacchus Winecellars</td> <td>Canada</td> </tr> <tr> <td>Magazzini Alimentari Riuniti</td> <td>Italy</td> </tr> <tr> <td>North/South</td> <td>UK</td> </tr> <tr> <td>Paris specialites</td> <td>France</td> </tr> </table>

Answer 2

你快到了。 您需要做的就是創建另一個 for 循環並迭代行中的所有td元素，並使用它們進行過濾。 通過這樣做，如果您將來添加任何列，過濾器將繼續工作。

在下面的代碼片段中，我已經這樣做了，並稍微修改了隱藏邏輯。 我開始隱藏所有行，如果找到匹配項，我取消隱藏它。

for (i = 1; i < tr.length; i++) {
    // Hide the row initially.
    tr[i].style.display = "none";

    td = tr[i].getElementsByTagName("td");
    for (var j = 0; j < td.length; j++) {
      cell = tr[i].getElementsByTagName("td")[j];
      if (cell) {
        if (cell.innerHTML.toUpperCase().indexOf(filter) > -1) {
          tr[i].style.display = "";
          break;
        } 
      }
    }
}

 function myFunction() { var input, filter, table, tr, td, cell, i, j; input = document.getElementById("myInput"); filter = input.value.toUpperCase(); table = document.getElementById("myTable"); tr = table.getElementsByTagName("tr"); for (i = 1; i < tr.length; i++) { // Hide the row initially. tr[i].style.display = "none"; td = tr[i].getElementsByTagName("td"); for (var j = 0; j < td.length; j++) { cell = tr[i].getElementsByTagName("td")[j]; if (cell) { if (cell.innerHTML.toUpperCase().indexOf(filter) > -1) { tr[i].style.display = ""; break; } } } } }

 <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name"> <table id="myTable"> <tr class="header"> <th style="width:60%;">Name</th> <th style="width:40%;">Country</th> </tr> <tr> <td>Alfreds Futterkiste</td> <td>Germany</td> </tr> <tr> <td>Berglunds snabbkop</td> <td>Sweden</td> </tr> <tr> <td>Island Trading</td> <td>UK</td> </tr> <tr> <td>Koniglich Essen</td> <td>Germany</td> </tr> <tr> <td>Laughing Bacchus Winecellars</td> <td>Canada</td> </tr> <tr> <td>Magazzini Alimentari Riuniti</td> <td>Italy</td> </tr> <tr> <td>North/South</td> <td>UK</td> </tr> <tr> <td>Paris specialites</td> <td>France</td> </tr> </table>

注意：我建議使用innerText而不是innerHTML進行過濾。 如果單元格中有 HTML 內容， innerHTML可能會干擾過濾。

Answer 3

只有改變

td = tr[i].getElementsByTagName("td")[0];

到

td = tr[i].getElementsByTagName("td")[1];

應該工作正常。

更新

添加所有列搜索。

 function myFunction() { var input, filter, table, tr, td, i; input = document.getElementById("myInput"); filter = input.value.toUpperCase(); table = document.getElementById("myTable"); tr = table.getElementsByTagName("tr"); for (var i = 0; i < tr.length; i++) { var tds = tr[i].getElementsByTagName("td"); var flag = false; for(var j = 0; j < tds.length; j++){ var td = tds[j]; if (td.innerHTML.toUpperCase().indexOf(filter) > -1) { flag = true; } } if(flag){ tr[i].style.display = ""; } else { tr[i].style.display = "none"; } } }

 <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name"> <table id="myTable"> <tr class="header"> <th style="width:60%;">Name</th> <th style="width:40%;">Country</th> </tr> <tr> <td>Alfreds Futterkiste</td> <td>Germany</td> </tr> <tr> <td>Berglunds snabbkop</td> <td>Sweden</td> </tr> <tr> <td>Island Trading</td> <td>UK</td> </tr> <tr> <td>Koniglich Essen</td> <td>Germany</td> </tr> <tr> <td>Laughing Bacchus Winecellars</td> <td>Canada</td> </tr> <tr> <td>Magazzini Alimentari Riuniti</td> <td>Italy</td> </tr> <tr> <td>North/South</td> <td>UK</td> </tr> <tr> <td>Paris specialites</td> <td>France</td> </tr> </table>

Answer 4

和

td = tr[i].getElementsByTagName("td")[0];

你只選擇了第一個td 。 相反，檢查some td是否具有相關字符串：

 function myFunction() { const input = document.getElementById("myInput"); const inputStr = input.value.toUpperCase(); document.querySelectorAll('#myTable tr:not(.header)').forEach((tr) => { const anyMatch = [...tr.children] .some(td => td.textContent.toUpperCase().includes(inputStr)); if (anyMatch) tr.style.removeProperty('display'); else tr.style.display = 'none'; }); }

 <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name"> <table id="myTable"> <tr class="header"> <th style="width:60%;">Name</th> <th style="width:40%;">Country</th> </tr> <tr> <td>Alfreds Futterkiste</td> <td>Germany</td> </tr> <tr> <td>Berglunds snabbkop</td> <td>Sweden</td> </tr> <tr> <td>Island Trading</td> <td>UK</td> </tr> <tr> <td>Koniglich Essen</td> <td>Germany</td> </tr> <tr> <td>Laughing Bacchus Winecellars</td> <td>Canada</td> </tr> <tr> <td>Magazzini Alimentari Riuniti</td> <td>Italy</td> </tr> <tr> <td>North/South</td> <td>UK</td> </tr> <tr> <td>Paris specialites</td> <td>France</td> </tr> </table>

Answer 5

下面是創建一個 HTML 表格的代碼，該表格在每列上分別帶有一個過濾器選項。 相信我，這很容易並且對我有用。 試試吧。 我正在將它應用於我的 JSON 數據。

為此，我將此歸功於https://www.jqueryscript.net/table/filter-each-column.html

 function checkval(){1==$("tbody tr:visible").length&&"No result found"==$("tbody tr:visible td").html()?$("#rowcount").html("0"):$("#rowcount").html($("tr:visible").length-1)}$(document).ready(function(){$("#rowcount").html($(".filterable tr").length-1),$(".filterable .btn-filter").click(function(){var t=$(this).parents(".filterable"),e=t.find(".filters input"),l=t.find(".table tbody");1==e.prop("disabled")?(e.prop("disabled",!1),e.first().focus()):(e.val("").prop("disabled",!0),l.find(".no-result").remove(),l.find("tr").show()),$("#rowcount").html($(".filterable tr").length-1)}),$(".filterable .filters input").keyup(function(t){if("9"!=(t.keyCode||t.which)){var e=$(this),l=e.val().toLowerCase(),n=e.parents(".filterable"),i=n.find(".filters th").index(e.parents("th")),r=n.find(".table"),o=r.find("tbody tr"),d=o.filter(function(){return-1===$(this).find("td").eq(i).text().toLowerCase().indexOf(l)});r.find("tbody .no-result").remove(),o.show(),d.hide(),d.length===o.length&&r.find("tbody").prepend($('<tr class="no-result text-center"><td colspan="'+r.find(".filters th").length+'">No result found</td></tr>'))}$("#rowcount").html($("tr:visible").length-1),checkval()})});

 .filterable{margin-top:15px}.filterable .panel-heading .pull-right{margin-top:-20px}.filterable .filters input[disabled]{background-color:transparent;border:none;cursor:auto;box-shadow:none;padding:0;height:auto}.filterable .filters input[disabled]::-webkit-input-placeholder{color:#333}.filterable .filters input[disabled]::-moz-placeholder{color:#333}.filterable .filters input[disabled]:-ms-input-placeholder{color:#333}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <div class="panel panel-primary filterable"> <table class="table"> <thead> <tr class="filters"> <th><input type="text" placeholder="#"></th> <th><input type="text" placeholder="First Name"></th> <th><input type="text" placeholder="Last Name"></th> <th><input type="text" placeholder="Username"></th> <th><input type="text" placeholder="PhoneNo"></th> </tr> </thead> <tbody> <tr> <td>10</td> <td>Tom</td> <td>Amar</td> <td>@TAmar</td> <td>306-456-7890</td> </tr> <tr> <td>20</td> <td>Dick</td> <td>Akbar</td> <td>@DAkbar</td> <td>456-456-7890</td> </tr> <tr> <td>30</td> <td>Harry</td> <td>Anthony</td> <td>@HAnthony</td> <td>526-456-7890</td> </tr> </tbody> </table> <p>No.of Rows : <span id="rowcount"></span></p> </div>

Answer 6

如果你想單獨對第二列進行過濾，那么下面給出了對 Yosvel Quintero Arguelles 代碼的一些修改

const table = document.getElementById("tableId");  
const trs = table.querySelectorAll('tr:nth-child(n)');  
// Or if you have headers, use line below instead of above
// const trs = document.querySelectorAll('#tableId tr:not(.header)');
const filter = document.querySelector('#myInput').value;
const regex = new RegExp(filter, 'i');
const isFoundInTds = (td) => regex.test(td.innerHTML);
const setTrStyleDisplay = ({ style, children }) => {
    // Here 1 represents second column
    style.display = isFoundInTds(children[1]) ? '' : 'none';
};

trs.forEach(setTrStyleDisplay);

Answer 7

您還可以通過這種方式使用 js 過濾表 添加一個處理點擊的按鈕

 <button class="btn btn-secondary mx-2" 
  type="submit" 
  onclick="sortTableyear3()">3</button>

然后在你的 .js 文件或腳本標簽中添加這個函數

 function sortTableyear3() {
  var input, filter, table, tr, td, i, txtValue;
  input = 3;  // change this accordingly
  filter = input.value;
  table = document.getElementById("regstud-table");
  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")[2];// 2 is for 3rd column
    if (td) {
        txtValue = td.textContent || td.innerText;
        if (txtValue == input) {
            tr[i].style.display = "";
        } else {
            tr[i].style.display = "none";
        }
    }
}
  }

這將僅顯示第三列值為 3 的那些行。並在表中使用大於和過濾器

Answer 8

我的簡單代碼：（我使用帶有類 d-none 的引導程序來隱藏行）

const rows = document.querySelectorAll("tbody tr")
    
document.querySelector('#filter').addEventListener('keyup', (e) => {        // You may want to use any debounce function like the one from Underscore.js
    rows.forEach( row => {
        if(row.innerText.indexOf(e.target.value) == -1) {
            row.classList.add('d-none')
        }
        else {
            row.classList.remove('d-none')
        }
    })
})