更改w3示例表格過濾器以搜索多列

我在PHP中使用每行交替大小的列表的大表。行和列由一系列從foreach循環調用MYSQL數據庫中的東西來生成和填充。更改w3示例表格過濾器以搜索多列

我很滿意PHP/HTML和MYSQL事物的結束。

我正在嘗試使用Javascript爲此表創建一些「快速過濾器」。

我從W3其中一個例子是如下

<script> 
    function myFunction() { 
// Declare variables 
    var input, filter, table, tr, td, i; 
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) { 
    if (td.innerHTML.toUpperCase().indexOf(filter) > -1) { 
    tr[i].style.display = ""; 
    } else { 
    tr[i].style.display = "none"; 
    } 
} 
} 
} 
</script>

此作品旁邊的輸入標籤，您可以與用戶輸入的文本搜索開始。我看起來不像這個例子的例子了，但我真正的問題是

我該如何通過所有列（實際上是表格的整個文本）進行搜索，如同它的書面，這段代碼控制哪一列被搜索。

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

末尾的[0]表示僅搜索「第一個」列。將0更改爲另一個數字將更改爲搜索整個表的相應列。

我覺得必須有一種簡單的方法將其擴展到多列。我對JS完全陌生，所以我真的在這裏摸索。

我已經嘗試了所有我能想到的喜歡只是改變周圍的東西的數量，如基本的東西：

[0,1,2,3,4]// [0-4]// [0][1][2]

的那些簡單的事情似乎都不是我要找的。它要麼選擇列出的最後列出的數字進行搜索，要麼將其完全分解！

來源

2017-06-30 L1R

你必須嵌套循環！我不得不使用一個額外的變量發生來檢查一個事件是否在同一行的任何td。所以如果沒有，該行可以隱藏！

function myFunction() { 
     // Declare variables 
     var input, filter, table, tr, td, i, occurrence; 

     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++) { 
     occurrence = false; // Only reset to false once per row. 
     td = tr[i].getElementsByTagName("td"); 
     for(var j=0; j< td.length; j++){     
      currentTd = td[j]; 
      if (currentTd) { 
       if (currentTd.innerHTML.toUpperCase().indexOf(filter) > -1) { 
        tr[i].style.display = ""; 
        occurrence = true; 
       } 
      } 
     } 
     if(!occurrence){ 
      tr[i].style.display = "none"; 
     } 
    } 
    }

currentTd [j]就是你要找的東西！但是既然你可能不知道連續有多少td，你必須使用for循環！

來源

2017-06-30 18:11:29

更改w3示例表格過濾器以搜索多列

回答

相關問題