錶行篩選所有列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>