如何根據按鍵點擊過濾記錄？

我是C++程序員，也是JS的新手。我試圖根據點擊事件來過濾表格。我有下表。我如何根據點擊鍵和過濾其他記錄來保存記錄。如何根據按鍵點擊過濾記錄？

<!DOCTYPE html> 
<html> 
<body> 

<table border =1 cellspacing="1" cellpadding="1" style="width:100%"> 
<tr><th>ID</th><th>Name</th><th>Marks</th></tr> 
    <tr> 
    <td>22</td> 
    <td>Smith</td>  
    <td>50</td> 
    </tr> 
    <tr> 
    <td>23</td> 
    <td>Jackson</td>   
    <td>94</td> 
    </tr> 
    <tr> 
    <td>45</td> 
    <td>Doe</td>   
    <td>80</td> 
    </tr> 
<tr> 
    <td>24</td> 
    <td>Doe</td>   
    <td>80</td> 
    </tr> 
<tr> 
    <td>25</td> 
    <td>Doe</td>   
    <td>80</td> 
    </tr> 
<tr> 
    <td>29</td> 
    <td>Doe</td>   
    <td>80</td> 
    </tr> 
</table> 

<input type="checkbox" name="vehicle" value="22"> 22<br> 
<input type="checkbox" name="vehicle" value="23"> 23 <br> 
<input type="checkbox" name="vehicle" value="24"> 24<br> 
<input type="checkbox" name="vehicle" value="25"> 25 <br> 
<input type="checkbox" name="vehicle" value="29"> 29<br> 
<input type="checkbox" name="vehicle" value="45"> 45 <br> 

</body> 
</html>

在上面的例子中，如果我點擊23只應該顯示ID爲23的記錄，應該過濾掉其餘部分。

來源

2015-01-21 Manish

你是否願意接受一個基於jQuery的解決方案？ – Terry 2015-01-21 09:52:20

如果你正在尋找一個基於jQuery的解決方案，我掀起了一個。代碼的邏輯非常簡單：我們觸發，只要在任何複選框檢測到change事件過濾功能，一個警告：

如果沒有複選框被選中，我們將展示所有的錶行，但
如果一個或多個檢查，我們着手進行過濾

對於過濾功能：

我們首先可以隱藏所有的錶行。
然後，我們將選中的複選框的所有值映射到一個數組中，比如vals。這是通過使用.map()來完成的，它返回每個元素的值。我們連鎖.get() after .map() in order to retrieve the array。
使用.filter()函數來比較每個錶行的第一個表格單元格中的文本節點，以查看文本節點是否與數組中的任何一個元素匹配。如果確實如此，我們將它們退還給他們看。

$(function() { 
 
    $('input[type="checkbox"]').change(function() { 
 
    // We check if one or more checkboxes are selected 
 
    // If one or more is selected, we perform filtering 
 
    if($('input[type="checkbox"]:checked').length > 0) { 
 
     // Get values all checked boxes 
 
     var vals = $('input[type="checkbox"]:checked').map(function() { 
 
     return this.value; 
 
     }).get(); 
 

 
     // Here we do two things to table rows 
 
     // 1. We hide all 
 
     // 2. Then we filter, show those whose value in first <td> matches checkbox value 
 
     $('table tr') 
 
     .hide() // 1 
 
     .filter(function() { // 2 
 
     return vals.indexOf($(this).find('td:first').text()) > -1; 
 
     }).show(); 
 
    } else { 
 
     // Show all 
 
     $('table tr').show(); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table border =1 cellspacing="1" cellpadding="1" style="width:100%"> 
 
<tr><th>ID</th><th>Name</th><th>Marks</th></tr> 
 
    <tr> 
 
    <td>22</td> 
 
    <td>Smith</td>  
 
    <td>50</td> 
 
    </tr> 
 
    <tr> 
 
    <td>23</td> 
 
    <td>Jackson</td>   
 
    <td>94</td> 
 
    </tr> 
 
    <tr> 
 
    <td>45</td> 
 
    <td>Doe</td>   
 
    <td>80</td> 
 
    </tr> 
 
<tr> 
 
    <td>24</td> 
 
    <td>Doe</td>   
 
    <td>80</td> 
 
    </tr> 
 
<tr> 
 
    <td>25</td> 
 
    <td>Doe</td>   
 
    <td>80</td> 
 
    </tr> 
 
<tr> 
 
    <td>29</td> 
 
    <td>Doe</td>   
 
    <td>80</td> 
 
    </tr> 
 
</table> 
 

 
<input type="checkbox" name="vehicle" value="22"> 22<br> 
 
<input type="checkbox" name="vehicle" value="23"> 23 <br> 
 
<input type="checkbox" name="vehicle" value="24"> 24<br> 
 
<input type="checkbox" name="vehicle" value="25"> 25 <br> 
 
<input type="checkbox" name="vehicle" value="29"> 29<br> 
 
<input type="checkbox" name="vehicle" value="45"> 45 <br>

來源

2015-01-21 10:02:18 Terry

你需要做的是使用JavaScript，在這裏使用jQuery庫中的原始工作示例：http://jsfiddle.net/zn8ocm43/1/

的想法是，當你點擊該行你觸發Javascript函數隱藏所有其他行，當您再次單擊所選行時，其他行將再次顯示。

要隱藏行，你可以添加一個CSS類將其與

display:none

此外，它會使用THEAD和TBODY標籤是更好地從數據行單獨的標題行：http://www.w3schools.com/tags/tag_thead.asp

如果您願意使用jQuery，你可以找到爲你做所有工作的插件。

來源

2015-01-21 10:09:54 user1498339

您可以通過另一種方式過使用jQuery

$(function(){ 
 
\t \t \t $("input[type='checkbox']").change(function(){ 
 
\t \t \t \t $("table tr td:first-child").each(function(){ 
 
\t \t \t \t \t $(this).closest('tr').removeClass("hideCls"); 
 
\t \t \t \t }); 
 
\t \t \t \t var chBoxVal=$(this).attr("value"); 
 
\t \t \t \t $("table tr td:first-child").each(function(){ 
 
\t \t \t \t \t if($(this).text()==chBoxVal) 
 
\t \t \t \t \t \t $(this).closest('tr').addClass("showCls"); 
 
\t \t \t \t \t else 
 
\t \t \t \t \t \t $(this).closest('tr').addClass("hideCls"); 
 
\t \t \t \t }); 
 
\t \t \t }); 
 
\t \t });

.hideCls{ 
 
\t \t \t display:none; 
 
\t \t } 
 
.showCls{ 
 
\t \t \t display:table-row; 
 
\t \t }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<table border =1 cellspacing="1" cellpadding="1" style="width:100%"> 
 
<tr><th>ID</th><th>Name</th><th>Marks</th></tr> 
 
    <tr> 
 
    <td>22</td> 
 
    <td>Smith</td>  
 
    <td>50</td> 
 
    </tr> 
 
    <tr> 
 
    <td>23</td> 
 
    <td>Jackson</td>   
 
    <td>94</td> 
 
    </tr> 
 
    <tr> 
 
    <td>45</td> 
 
    <td>Doe</td>   
 
    <td>80</td> 
 
    </tr> 
 
<tr> 
 
    <td>24</td> 
 
    <td>Doe</td>   
 
    <td>80</td> 
 
    </tr> 
 
<tr> 
 
    <td>25</td> 
 
    <td>Doe</td>   
 
    <td>80</td> 
 
    </tr> 
 
<tr> 
 
    <td>29</td> 
 
    <td>Doe</td>   
 
    <td>80</td> 
 
    </tr> 
 
</table> 
 

 
<input type="checkbox" name="vehicle" value="22"> 22<br> 
 
<input type="checkbox" name="vehicle" value="23"> 23 <br> 
 
<input type="checkbox" name="vehicle" value="24"> 24<br> 
 
<input type="checkbox" name="vehicle" value="25"> 25 <br> 
 
<input type="checkbox" name="vehicle" value="29"> 29<br> 
 
<input type="checkbox" name="vehicle" value="45"> 45 <br>

來源

2015-01-21 10:27:03

但是，如果你檢查多個複選框，一切都隱藏起來。 – Terry 2015-01-21 10:32:14

我已經更新了代碼，請檢查它。 – 2015-01-21 11:00:59

是否可以通過傳遞數組（ids）來單擊div元素來做同樣的事情？ – Manish 2015-01-22 11:31:30

我不知道如果我這樣做是正確做到這一點，但我認爲他是想按列進行篩選。如果這就是他的搜索，這裏是純JS一個快速腳本：

function NodeListToArray (nodeList) { 
 
\t var arr = []; 
 

 
\t for (var i = nodeList.length >>> 0; i--;) 
 
\t \t arr[i] = nodeList[i]; 
 

 
\t return arr; 
 
} 
 

 
function filter (rows, columnIndex) { 
 
\t rows.forEach(function (row, i) { 
 
\t \t for (var k = 0; k < rows[i].children.length; k++) { 
 
\t \t \t if (k === columnIndex || !~columnIndex) 
 
\t \t \t \t rows[i].children[k].style.visibility = 'initial'; 
 
\t \t \t else 
 
\t \t \t \t rows[i].children[k].style.visibility = 'hidden'; 
 
\t \t } 
 
\t }); 
 
} 
 

 
var rows = NodeListToArray(document.querySelectorAll('tr')); 
 

 
for (var i = 0; i < rows[0].children.length; i++) { 
 
\t rows[0].children[i].addEventListener('click', function (index, e) { 
 
\t \t filter(rows, index); 
 
\t }.bind(null, i)); 
 
} 
 

 
document.querySelector('button').addEventListener('click', function() { 
 
\t filter(rows, -1); 
 
});

<table border =1 cellspacing="1" cellpadding="1" style="width:100%"> 
 
<tr><th>ID</th><th>Name</th><th>Marks</th></tr> 
 
    <tr> 
 
    <td>22</td> 
 
    <td>Smith</td>  
 
    <td>50</td> 
 
    </tr> 
 
    <tr> 
 
    <td>23</td> 
 
    <td>Jackson</td>   
 
    <td>94</td> 
 
    </tr> 
 
    <tr> 
 
    <td>45</td> 
 
    <td>Doe</td>   
 
    <td>80</td> 
 
    </tr> 
 
<tr> 
 
    <td>24</td> 
 
    <td>Doe</td>   
 
    <td>80</td> 
 
    </tr> 
 
<tr> 
 
    <td>25</td> 
 
    <td>Doe</td>   
 
    <td>80</td> 
 
    </tr> 
 
<tr> 
 
    <td>29</td> 
 
    <td>Doe</td>   
 
    <td>80</td> 
 
    </tr> 
 
</table> 
 

 
<button>Show All</button>

來源

2015-01-21 10:32:49

如何根據按鍵點擊過濾記錄？

回答

相關問題