表行筛选所有列TD在Javascript

Question

我这里有文本过滤列工作表列0中，但我想的是，所有列将被过滤掉，而不是仅仅列0

这里是我的jsfiddle：

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

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name"> 
 

 
<table id="myTable" border="1"> 
 
    <tr class="header"> 
 
    <th style="width:60%;">Name</th> 
 
    <th style="width:40%;">Country</th> 
 
    </tr> 
 
    <tr> 
 
    <td>Alfreds Futterkiste</td> 
 
    <td>Germany</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Berglunds snabbkop</td> 
 
    <td>Sweden</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Island Trading</td> 
 
    <td>UK</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Koniglich Essen</td> 
 
    <td>Germany</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Laughing Bacchus Winecellars</td> 
 
    <td>Canada</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Magazzini Alimentari Riuniti</td> 
 
    <td>Italy</td> 
 
    </tr> 
 
    <tr> 
 
    <td>North/South</td> 
 
    <td>UK</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Paris specialites</td> 
 
    <td>France</td> 
 
    </tr> 
 
</table>

另外也一样，我不知道如何实现这一点：“过滤选项应该不会阻止用户界面，您可以使用进度条”

我在这里包含了我所有的示例代码。

Answer 1

所有你需要做的是循环通过TDS每一行

function myFunction() { 
    var input, filter, table, tr, td, i, t; 
    input = document.getElementById("myInput"); 
    filter = input.value.toUpperCase(); 
    table = document.getElementById("myTable"); 
    tr = table.getElementsByTagName("tr"); 
    for (i = 0; i < tr.length; i++) { 
    var filtered = false; 
    var tds = tr[i].getElementsByTagName("td"); 
    for(t=0; t<tds.length; t++) { 
     var td = tds[t]; 
     if (td) { 
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) { 
      filtered = true; 
      } 
     }  
    } 
    if(filtered===true) { 
     tr[i].style.display = ''; 
    } 
    else { 
     tr[i].style.display = 'none'; 
    } 
    } 
} 

Answer 2

您是否在寻找一些这样的功能吗？我只是稍微更新了你的功能。

function myFunction() { 
 
    var input, filter, table, tr, td, i; 
 
    input = document.getElementById("myInput"); 
 
    filter = input.value.toUpperCase(); 
 
    table = document.getElementById("myTable"); 
 
    var rows = table.getElementsByTagName("tr"); 
 
    for (i = 0; i < rows.length; i++) { 
 
    var cells = rows[i].getElementsByTagName("td"); 
 
    var j; 
 
    var rowContainsFilter = false; 
 
    for (j = 0; j < cells.length; j++) { 
 
     if (cells[j]) { 
 
     if (cells[j].innerHTML.toUpperCase().indexOf(filter) > -1) { 
 
      rowContainsFilter = true; 
 
      continue; 
 
     } 
 
     } 
 
    } 
 

 
    if (! rowContainsFilter) { 
 
     rows[i].style.display = "none"; 
 
    } else { 
 
     rows[i].style.display = ""; 
 
    } 
 
    } 
 
}

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name"> 
 

 
<table id="myTable" border="1"> 
 
    <tr class="header"> 
 
    <th style="width:60%;">Name</th> 
 
    <th style="width:40%;">Country</th> 
 
    </tr> 
 
    <tr> 
 
    <td>Alfreds Futterkiste</td> 
 
    <td>Germany</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Berglunds snabbkop</td> 
 
    <td>Sweden</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Island Trading</td> 
 
    <td>UK</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Koniglich Essen</td> 
 
    <td>Germany</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Laughing Bacchus Winecellars</td> 
 
    <td>Canada</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Magazzini Alimentari Riuniti</td> 
 
    <td>Italy</td> 
 
    </tr> 
 
    <tr> 
 
    <td>North/South</td> 
 
    <td>UK</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Paris specialites</td> 
 
    <td>France</td> 
 
    </tr> 
 
</table>