在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>

來源

2017-08-17 redrain1345

這不工作，因爲你只是在測試索引爲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>

來源

2017-08-17 01:55:15

太謝謝你了！很棒！ – redrain1345

在jQuery篩選表中篩選多列

回答

相關問題