與使用JavaScript

過濾搜索表我想根據我已經有了建立這個 http://www.w3schools.com/code/tryit.asp?filename=FBWZ3PB6XZWP 列創建選擇過濾器搜索框，但我不能用「所有」列與使用JavaScript

2017-01-20 Alexander Chandra

在遍歷行時，您應該遍歷列。 –

在這裏複製和粘貼代碼..並告訴你已經嘗試了什麼。 –

這應該更換評論// all搜索選擇：

for (i = 1; i < tr.length; i++) { 
    // text from all the tds 
    var combinedText = ""; 
    // get all the tds (array of them notice there is no [selectz] at the end) 
    var td = tr[i].getElementsByTagName("td"); 

    // loop over all of them and accumulate their text 
    for(var j = 0; j < td.length; j++) 
     combinedText += td[j].innerHTML.toUpperCase(); 

    // if filter is in the accumulated text then show the row else hide it 
    if (combinedText.indexOf(filter) > -1) { 
     tr[i].style.display = ""; 
    } else { 
     tr[i].style.display = "none"; 
    }  
}

來源

2017-01-20 04:34:27

它的工作很棒，但列名隱藏 –

@AlexanderChandra耶！ 'for（i = 1，...'不包括頭部的第一行。 –

所以只是改變它爲（i = 0）將工作？但我做到了，它不起作用 –

我對代碼做了一些更改，現在正在工作。你可以在下面找到解決方案:)。爲了更具可讀性，我可以推薦更改一些代碼。

乾杯！

<!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>My Customers</h2> 
 
<select id="myselect2" name="myselect2"> 
 
\t <option value="0">Name</option> 
 
\t <option value="1">Country</option> 
 
\t <option value="2">All</option> 
 
</select> 
 
<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%;">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> 
 

 
<script> 
 
function myFunction() { 
 
    var input, filter, table, tr, td, i, selectz; 
 
    input = document.querySelector("#myInput"); 
 
    filter = input.value.toUpperCase(); 
 
    table = document.getElementById("myTable"); 
 
    tr = document.querySelectorAll("tr"); 
 
    selectz=document.getElementById("myselect2").options[document.getElementById("myselect2").selectedIndex].value; 
 
    
 
    if(selectz==2){ 
 
    
 
    tr.forEach(function(row){ 
 
     var content = row.innerHTML.toUpperCase(), 
 
      display = 'none'; 
 
     if(content.indexOf(filter) != -1){ 
 
      display = ''; 
 
     } 
 
     row.style.display = display; 
 
    }); 
 
    
 
    }else{ 
 
    
 
    for (i = 0; i < tr.length; i++) { 
 
    
 
     td = tr[i].getElementsByTagName("td")[selectz]; 
 
     if (td) { 
 
     if (td.innerHTML.toUpperCase().indexOf(filter) > -1) { 
 
      tr[i].style.display = ""; 
 
     } else { 
 
      tr[i].style.display = "none"; 
 
     } 
 
     }  
 
    } 
 
    } 
 
    
 
} 
 
</script> 
 

 
</body> 
 
</html>

來源

2017-01-20 04:42:03

您可以在「selectz == 2」中使用此。

for (i = 1; i < tr.length; i++) { 

    if (tr.textContent.toUpperCase().indexOf(filter) > -1) { 
     tr[i].style.display = ""; 
    } else { 
     tr[i].style.display = "none"; 
    } 

}

來源

2017-01-20 04:43:16 Piyush

這不起作用 –

與使用JavaScript

回答

相關問題