使用JavaScript過濾/搜索表

Question

首先，我不是JavaScript專家，所以答案可能很簡單，但目前我使用這個（https://www.w3schools.com/howto/howto_js_filter_table.asp）教程來過濾表格，但是你只能在1列中搜索，所以在本例中僅用於名稱或國家，但我想同時在兩列中進行搜索。

這段代碼需要改變什麼？

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"; 
     } 
    } 
    } 
} 

Answer 1

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]; // This code only get the frist "TD" element 
     tds = tr[i].getElementsByTagName("td"); 
     for (j = 0; j < td.length; j++) { 
      td = tds[j]; 
      if (td) { 
       if (td.innerHTML.toUpperCase().indexOf(filter) > -1) { 
        tr[i].style.display = ""; 
       } else { 
        tr[i].style.display = "none"; 
       } 
      } 
     } 

    } 
} 

}

Answer 2

您可以轉換HTMLCollection通過getElementsByTagName返回到陣列（check this answer for ways to do it），然後使用some方法td值的檢查，如果 '一些' 符合您filter。如果有匹配，則顯示它們。其他人隱藏它們。下面的代碼：

function myFunction() { 
    const input = document.getElementById('myInput') 
    const filter = input.value.toLowerCase() 
    const table = document.getElementById('myTable') 
    const tr = [...table.getElementsByTagName('tr')] 

    tr.forEach((t) => { 
    const foundMatch = [...t.getElementsByTagName('td')].some((td) => { 
     return td.innerHTML.toLowerCase().indexOf(filter) > -1 
    }) 
    if (foundMatch) { 
     t.style.display = '' 
    } else { 
     t.style.display = 'none' 
    } 
    }) 
} 

檢查它在行動上的jsfiddle：https://jsfiddle.net/marcusmonteiro/hsdyajbn/2/show/