jquery通过select列表选择框对表格数据进行过滤
表格数据
<table id=\"example\">
<thead>
<tr>
<th>Name</th>
<th>Surname</th>
</tr>
</thead>
<tbody>
<tr>
<td>Michael</td>
<td>Jordan</td>
</tr>
<tr>
<td>Michael</td>
<td>Jackson</td>
</tr>
<tr>
<td>Bruno</td>
<td>Mars</td>
</tr>
</tbody>
</table>
JS过滤代码,其中select是动态生成的
$(\"#example > thead th\").each(function(i) {
$(\"<select />\").attr(\"data-index\", i).html($(\"<option />\")).change(function() {
$(\"#example > tbody > tr\").show().filter(function() {
var comb = [], children = $(this).children();
children.each(function(i) {
var value = $(\"select[data-index=\'\" + i + \"\']\").val();
if (value == $(this).text() || value == \"\") comb.push(1);
});
return comb.length != children.length;
}).hide();
}).appendTo(\"body\");
});
$(\"#example > tbody tr\").each(function() {
$(this).children().each(function(i) {
var that = $(this);
var select = $(\"select[data-index=\'\" + i + \"\']\");
if (!select.children().filter(function() {
return $(this).text() == that.text();
}).length) {
select.append($(\"<option />\").text($(this).text()));
}
});
});
本文地址:https://www.stayed.cn/item/17133
转载请注明出处。
本站部分内容来源于网络,如侵犯到您的权益,请 联系我