在jQuery筛选表中筛选多列

问题描述：

我在代码中遇到困难。在用于过滤破折号的额外功能之前，我通过所有3列搜索了表格。现在我只能搜索一个。我已经看遍了，发现了很多例子，但不能将它应用到我的代码如下。如果任何人都可以帮我搜索全部3列而不是索引为[0]的第一列。我想用这种类型的方法进行过滤。我只是不知道如何在自己的代码中实现。如果输入电话号码或姓名或身份证件，应该找到它。在jQuery筛选表中筛选多列

<!DOCTYPE html>  
<html> 
<head>  
<style>  
* {  
    box-sizing: border-box;  
} 

#myInput {  
    background-image: url('/css/searchicon.png');  
    background-position: 10px 10px;  
    background-repeat: no-repeat;  
    width: 100%;  
    font-size: 16px;  
    padding: 12px 20px 12px 40px;  
    border: 1px solid #ddd;  
    margin-bottom: 12px;  
} 

#myTable {  
    border-collapse: collapse;  
    width: 100%;  
    border: 1px solid #ddd;  
    font-size: 18px;  
} 

#myTable th, #myTable td {  
    text-align: left;  
    padding: 12px;  
} 

#myTable tr {  
    border-bottom: 1px solid #ddd;  
} 

#myTable tr.header, #myTable tr:hover {  
    background-color: #f1f1f1;  
}  
</style> 

</head>  
<body>   

<h2>Number search</h2>  

<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%;">Number</th> 
    <th style="width:60%;">Name</th> 
    <th style="width:60%;">ID</th>  
    </tr>  
    <tr>  
    <td>905-373-3333</td> 
    <td>Mike</td> 
    <td>4563</td>  
    </tr>  
    <tr>  
    <td>905-333-3333</td> 
    <td>adam</td> 
    <td>8963</td>  
    </tr>  
    <tr>  
    <td>416-373-3432</td> 
    <td>Jim</td> 
    <td>9363</td>  
    </tr>  
</table>   

<script>  
function myFunction() {  
    var input, filter, table, tr, td, i, cleanedFilter;  
    input = document.getElementById("myInput");  
    filter = input.value.toUpperCase();  
    table = document.getElementById("myTable");  
    tr = table.getElementsByTagName("tr");   

    cleanedFilter = filter.replace("-","");   

    for (i = 0; i < tr.length; i++) {  
    td = tr[i].getElementsByTagName("td")[0];    

    if (td) {  
     cellContent = td.innerHTML.toUpperCase().replace(/-/g,"");    

     if (cellContent.indexOf(cleanedFilter) > -1) {  
     tr[i].style.display = "";  
     } else {  
     tr[i].style.display = "none";  
     }  
    }   
    }  
}  
</script>   

</body>  
</html>

答

这不工作，因为你只是在测试索引为0。你也应该得到该指数1和2，这可能不是通过尝试最佳的解决方案。有用。

<!DOCTYPE html>  
 
<html> 
 
<head>  
 
<style>  
 
* {  
 
    box-sizing: border-box;  
 
} 
 

 
#myInput {  
 
    background-image: url('/css/searchicon.png');  
 
    background-position: 10px 10px;  
 
    background-repeat: no-repeat;  
 
    width: 100%;  
 
    font-size: 16px;  
 
    padding: 12px 20px 12px 40px;  
 
    border: 1px solid #ddd;  
 
    margin-bottom: 12px;  
 
} 
 

 
#myTable {  
 
    border-collapse: collapse;  
 
    width: 100%;  
 
    border: 1px solid #ddd;  
 
    font-size: 18px;  
 
} 
 

 
#myTable th, #myTable td {  
 
    text-align: left;  
 
    padding: 12px;  
 
} 
 

 
#myTable tr {  
 
    border-bottom: 1px solid #ddd;  
 
} 
 

 
#myTable tr.header, #myTable tr:hover {  
 
    background-color: #f1f1f1;  
 
}  
 
</style> 
 

 
</head>  
 
<body>   
 

 
<h2>Number search</h2>  
 

 
<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%;">Number</th> 
 
    <th style="width:60%;">Name</th> 
 
    <th style="width:60%;">ID</th>  
 
    </tr>  
 
    <tr>  
 
    <td>905-373-3333</td> 
 
    <td>Mike</td> 
 
    <td>4563</td>  
 
    </tr>  
 
    <tr>  
 
    <td>905-333-3333</td> 
 
    <td>adam</td> 
 
    <td>8963</td>  
 
    </tr>  
 
    <tr>  
 
    <td>416-373-3432</td> 
 
    <td>Jim</td> 
 
    <td>9363</td>  
 
    </tr>  
 
</table>   
 

 
<script>  
 
function myFunction() {  
 
    var input, filter, table, tr, td, td1, td2, i, cleanedFilter;  
 
    input = document.getElementById("myInput");  
 
    filter = input.value.toUpperCase();  
 
    table = document.getElementById("myTable");  
 
    tr = table.getElementsByTagName("tr");   
 

 
    cleanedFilter = filter.replace("-","");   
 

 
    for (i = 0; i < tr.length; i++) {  
 
    td = tr[i].getElementsByTagName("td")[0]; 
 
    td1 = tr[i].getElementsByTagName("td")[1]; 
 
    td2 = tr[i].getElementsByTagName("td")[2]; 
 

 
    if (td) {  
 
     cellContent = td.innerHTML.toUpperCase().replace(/-/g,"");    
 
     cellContent1 = td1.innerHTML.toUpperCase().replace(/-/g,"");    
 
     cellContent2 = td2.innerHTML.toUpperCase().replace(/-/g,"");    
 

 
     if (cellContent.indexOf(cleanedFilter) > -1 || cellContent1.indexOf(cleanedFilter) > -1 || cellContent2.indexOf(cleanedFilter) > -1) {  
 
     tr[i].style.display = "";  
 
     } else {  
 
     tr[i].style.display = "none";  
 
     }  
 
    }   
 
    }  
 
}  
 
</script>   
 

 
</body>  
 
</html>

太谢谢你了！很棒！ – redrain1345

在jQuery筛选表中筛选多列

相关推荐