我试图找出如何使所有5列和行可搜索。目前它只通过第一列（DATE）进行搜索。有人可以请你协助我搜索所有的列和行吗？我已经包含了HTML，CSS和javascript，试图提供尽可能多的信息。
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";
}
}
}
}#myInput {
background-image: url('/css/searchicon.png'); /* Add a search icon to input */
background-position: 10px 12px; /* Position the search icon */
background-repeat: no-repeat; /* Do not repeat the icon image */
width: 100%; /* Full-width */
font-size: 16px; /* Increase font-size */
padding: 12px 20px 12px 40px; /* Add some padding */
border: 1px solid #ddd; /* Add a grey border */
margin-bottom: 12px; /* Add some space below the input */
}
#myTable {
border-collapse: collapse; /* Collapse borders */
width: 100%; /* Full-width */
border: 1px solid #ddd; /* Add a grey border */
font-size: 18px; /* Increase font-size */
}
#myTable th, #myTable td {
text-align: left; /* Left-align text */
padding: 12px; /* Add padding */
}
#myTable tr {
/* Add a bottom border to all table rows */
border-bottom: 1px solid #ddd;
}
#myTable tr.header, #myTable tr:hover {
/* Add a grey background color to the table header and on hover */
background-color: #f1f1f1;
}<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">
<table id="myTable">
<tr class="header">
<th style="width:20%;">Date</th>
<th style="width:20%;">Home</th>
<th style="width:20%;">Time</th>
<th style="width:20%;">Away</th>
<th style="width:20%;">City</th>
</tr>
<tr>
<td>08/01/2018</td>
<td>SPAIN</td>
<td>16:30 ET</td>
<td>USA</td>
<td>BARCELONA</td>
</tr>
<tr>
<td>08/02/2018</td>
<td>BOLIVIA</td>
<td>18:30 ET</td>
<td>PORTUAL</td>
<td>MADRID</td>
</tr>
<tr>
<td>08/03/2018</td>
<td>PUERTO RICO</td>
<td>18:30 ET</td>
<td>CANADA</td>
<td>CHICAGO</td>
</tr>
<tr>
<td>08/04/2018</td>
<td>MEXICO</td>
<td>19:30 ET</td>
<td>ENGLAND</td>
<td>LONDON</td>
</tr>
</table>
答案 0 :(得分：1)
使用现有代码，循环遍历表格单元格，就像循环遍历表格行一样。
下面，我隐藏每一行。对于每一行，如果单元格中的文本与搜索词匹配，则显示该行，并循环continues到下一行。
我还使用tBodies将搜索范围限制在第一个<tr>内的<tbody>元素，从而忽略表格标题。或者，您可以在搜索之前检查行中是否存在<td>个元素;类似于：if (tds.length) > 0。
function myFunction() {
// Declare variables
var input = document.getElementById("myInput");
var filter = input.value.toUpperCase();
var table = document.getElementById("myTable");
var trs = table.tBodies[0].getElementsByTagName("tr");
// Loop through first tbody's rows
for (var i = 0; i < trs.length; i++) {
// define the row's cells
var tds = trs[i].getElementsByTagName("td");
// hide the row
trs[i].style.display = "none";
// loop through row cells
for (var i2 = 0; i2 < tds.length; i2++) {
// if there's a match
if (tds[i2].innerHTML.toUpperCase().indexOf(filter) > -1) {
// show the row
trs[i].style.display = "";
// skip to the next row
continue;
}
}
}
}#myInput {
background-image: url('/css/searchicon.png');
background-position: 10px 12px;
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 th {
width: 20%;
}
#myTable tr {
border-bottom: 1px solid #ddd;
}
#myTable tr.header,
#myTable tr:hover {
background-color: #f1f1f1;
}<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">
<table id="myTable">
<thead>
<tr class="header">
<th>Date</th>
<th>Home</th>
<th>Time</th>
<th>Away</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>08/01/2018</td>
<td>SPAIN</td>
<td>16:30 ET</td>
<td>USA</td>
<td>BARCELONA</td>
</tr>
<tr>
<td>08/02/2018</td>
<td>BOLIVIA</td>
<td>18:30 ET</td>
<td>PORTUAL</td>
<td>MADRID</td>
</tr>
<tr>
<td>08/03/2018</td>
<td>PUERTO RICO</td>
<td>18:30 ET</td>
<td>CANADA</td>
<td>CHICAGO</td>
</tr>
<tr>
<td>08/04/2018</td>
<td>MEXICO</td>
<td>19:30 ET</td>
<td>ENGLAND</td>
<td>LONDON</td>
</tr>
</tbody>
</table>
答案 1 :(得分：0)
执行tr[i].getElementsByTagName("td")[0];时，您只选择日期列，这就是为什么它只搜索该日期列。如果你发现它至少一次，你将不得不循环遍历所有的coumn并将布尔值设置为true。
类似的东西：
var found = false;
var td = tr[i].getElementsByTagName("td");
for(j = 0; j < td.length; j++) {
if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
//if found at least once it is set to true
found = true;
}
}
//only hides or shows it after checking all columns
if(found){
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
答案 2 :(得分：0)
<input class="form-control" type="text" id="myInput" placeholder="Search ..." onkeyup="searchTableColumns()">
<table id="myTable">
.....
.....
.....
</table
function searchTableColumns() {
// Declare variables
var input, filter, table, tr, i, j, column_length, count_td;
column_length = document.getElementById('myTable').rows[0].cells.length;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
for (i = 1; i < tr.length; i++) { // except first(heading) row
count_td = 0;
for(j = 1; j < column_length-1; j++){ // except first column
td = tr[i].getElementsByTagName("td")[j];
/* ADD columns here that you want you to filter to be used on */
if (td) {
if ( td.innerHTML.toUpperCase().indexOf(filter) > -1) {
count_td++;
}
}
}
if(count_td > 0){
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}