这是指我之前的问题。
how to filter records based on key click?
但是现在我想尝试在div元素数组和表之间进行通信，那么如何根据div数组过滤记录。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function() { // on page load
$('#myElId').data('nameYourData', ["22","23","24"]);
var myData = $('#myElId').data('nameYourData');
$("#showMyData").text(myData);
});
</script>
</head>
<body>
<div id="myElId">Some element</div><br/>
MyData:<div id="showMyData"></div>
<a href="filter_records()">MyData:<div id="showMyData"></div></a>
<script>
$(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>
<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>
</body>
</html>
但是如何通过单击文本（如href）来实现它，并且应该在函数中传递showdata变量，并且应该过滤行。
答案 0 :(得分：1)
我稍微修改了你的代码。可能这个例子对你有帮助吗？ 粘贴到html文件中，看看它是否有效。
编辑：由于请求更改而修改的代码 Edit2：再次修改以将过滤器放入函数
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var filterList = [22,23,24];
//-----Code to implement click listener---
$('#showMyDataButton').click(function(){
if($(this).hasClass('clickableDivOff')){
//--------------------------
// Turn on Filter
//--------------------------
//change button effects
$(this).removeClass('clickableDivOff');
$(this).addClass('clickableDivOn');
$(this).text('Filter is on');
//applying filter
TurnOnFilter(filterList);
} else {
//--------------------------
// Turn off Filter
//--------------------------
//change button effects
$(this).removeClass('clickableDivOn');
$(this).addClass('clickableDivOff');
$(this).text('Filter is off');
//applying filter
TurnOffFilter();
}
});
});
function TurnOnFilter(filterList){
//hide all rows first (but not table header);
$('#dataTable tr').hide();
$('#dataTable tr:nth-child(1)').show();
//iterate each id in the filter list
//within each iteration, check all rows to find a matching id
// displays matching row.
for(var i=0;i<filterList.length;i++){
$('#dataTable td:nth-child(1)').each(function(){
if($(this).text().trim()==filterList[i]){
$(this).parent().show();
}
});
}
}
function TurnOffFilter(){
//simple show all the rows
$('#dataTable tr').show();
}
</script>
<style>
.clickableDiv{
border: 2px solid #ddd;
width: 200px;
text-align:center;
cursor: pointer;
}
.clickableDivOn{
font-weight:bold;
color: white;
background-color: #58BE97;
}
.clickableDivOff{
font-weight:bold;
color: white;
background-color: #EF9012;
}
table td, table th{
width:33%;
padding-left:5px;
text-align:left;
}
</style>
</head>
<body>
<h2>Filter Test</h2>
<div id="showMyDataButton" class="clickableDiv clickableDivOff">Filter is off</div>
<p></p>
<table id="dataTable" 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>
</body>
</html>