如何通过点击格数组来筛选记录？ [英] How to filter records by clicking div array?
本文介绍了如何通过点击格数组来筛选记录？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这是指我的previous问题。
This refers to my previous question.
但现在我想的div元素的数组和表，这样我怎么能基于格阵列上筛选记录之间的通信。
But now i am trying to communicate between div element array and table so how can i filter records based on div array.
<!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实现它应该函数传递和行应该被过滤掉。
But how can i implement it by clicking on text (like href) and showdata variable should be passed in function and rows should be filtered.
推荐答案
我修改了code位。可能是这个例子可能会对你有所帮助？
粘贴到一个HTML文件，看到它的工作。
I have modified your code a bit. May be this example could be helpful to you? Paste into a html file and see it work.
编辑：修改code，由于在要求更改
EDIT2：再次修改摆在功能过滤器
modified code due to change in request modified again to put the filter in functions
<!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>
这篇关于如何通过点击格数组来筛选记录？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
