JavaScript单输入搜索多个html表列

Question

我正在使用PHP和MySQL构建一个HTML表。我正在尝试使用JavaScript过滤/搜索表格，并只显示包含我需要的结果的行。我想要JavaScript输入来搜索表格的多个<td>。我能够得到这个工作，但它不会是一个优雅的解决方案，以放置更大的表。

我相信有更好的方法来选择正在搜索的内容，但一直没能找到任何东西。有没有人知道一种方法让我使这个代码更灵活适用于不同的列宽表？

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]; 
 
     td1 = tr[i].getElementsByTagName("td")[1]; 
 
     if (td+td1) { 
 
      if ((td.innerHTML.toUpperCase().indexOf(filter)+td1.innerHTML.toUpperCase().indexOf(filter)) > -2) { 
 
      tr[i].style.display = ""; 
 
      } else { 
 
      tr[i].style.display = "none"; 
 
      } 
 
     }  
 
     } 
 
    }

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search" title="Type in anything"> 
 
    
 
    <table id="myTable"> 
 
     <tr class="header"> 
 
     <th style="width:60%;">Name</th> 
 
     <th style="width:40%;">Country</th> 
 
     </tr> 
 
     <tr> 
 
     <td>North/South</td> 
 
     <td>UK</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Paris specialites</td> 
 
     <td>France</td> 
 
     </tr> 
 
    </table> 
 

Answer 1

有很多可以改善。首先记住明确声明你的变量，否则它们变成全局变量。

该解决方案不依赖任何特定数量的列。不管有多少，它都会工作。

更多看评论在线：

// Get DOM references just once: 
 
var input = document.getElementById("myInput"); 
 
var table = document.getElementById("myTable"); 
 

 
// Do event binding in JavaScript, not HTML 
 
input.addEventListener("keyup", filter); 
 
input.addEventListener("search", filter); 
 

 
// Get all rows, except the header and convert to array so .forEach() can be used to loop 
 
var rows = Array.prototype.slice.call(table.querySelectorAll("tr:not(.header)")); 
 

 
function filter() { 
 
    // Always trim user input 
 
    var filter = input.value.trim().toUpperCase(); 
 

 
    // Loop the rows 
 
    rows.forEach(function(row) { 
 
    
 
    // You really don't need to know if the search criteria 
 
    // is in the first or second cell. You only need to know 
 
    // if it is in the row. 
 
    var data = ""; 
 
    // Loop over all the cells in the current row and concatenate their text 
 
    Array.prototype.slice.call(row.getElementsByTagName("td")).forEach(function(r){ 
 
     // Don't use .innerHTML unless there is HTML. Use textContent when there isn't. 
 
     data += r.textContent; 
 
    }); 
 

 
    // Check the string for a match and show/hide row as needed 
 
    // Don't set individual styles. Add/remove classes instead 
 
    if(data.toUpperCase().indexOf(filter) > -1){ 
 
     // show row 
 
     row.classList.remove("hidden"); 
 
    } else { 
 
     // hide row 
 
     row.classList.add("hidden"); 
 
    } 
 
    }); 
 
    
 
}

input[type=search]{ 
 
    border-radius:10px; 
 
    outline:0; 
 
    padding:3px; 
 
} 
 

 
input[type=search]:focus{ 
 
    box-shadow:0 0 4px blue; 
 
} 
 

 
.hidden { display:none; } 
 
.leftHeader { width:60%; } 
 
.rightHeader { width:40%; }

<!-- Use the actual "search" input type and don't do inline CSS or JavaScript --> 
 
<input type="search" id="myInput" placeholder="Search" title="Type in anything"> 
 
    
 
<table id="myTable"> 
 
    <tr class="header"> 
 
    <th class="leftHeader">Name</th> 
 
    <th class="rightHeader">Country</th> 
 
    </tr> 
 
    <tr> 
 
    <td>North/South</td> 
 
    <td>UK</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Paris specialites</td> 
 
    <td>France</td> 
 
    </tr> 
 
</table>