jquery通過select列表選擇框?qū)Ρ砀駭?shù)據(jù)進行過濾示例
更新時間:2014年05月07日 11:49:59 作者:
這篇文章主要介紹了jquery通過select列表選擇框?qū)Ρ砀駭?shù)據(jù)進行過濾示例,需要的朋友可以參考下
jquery通過select列表選擇框?qū)Ρ砀駭?shù)據(jù)進行過濾
表格數(shù)據(jù)
復(fù)制代碼 代碼如下:
<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是動態(tài)生成的
復(fù)制代碼 代碼如下:
$("#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()));
}
});
});
您可能感興趣的文章:
- Chosen 基于jquery的選擇框插件使用方法
- jQuery實現(xiàn)選中彈出窗口選擇框內(nèi)容后賦值給文本框的方法
- 基于JQuery的Select選擇框的華麗變身
- 基于jquery實現(xiàn)select選擇框內(nèi)容左右移動添加刪除代碼分享
- 基于jQuery下拉選擇框插件支持單選多選功能代碼
- jquery實現(xiàn)select選擇框內(nèi)容左右移動代碼分享
- 各種選擇框jQuery的選中方法(實例講解)
- Jquery多選下拉列表插件jquery multiselect功能介紹及使用
- 用jquery實現(xiàn)下拉菜單效果的代碼
- 用jquery實現(xiàn)的一個超級簡單的下拉菜單
- jQuery模擬12306城市選擇框功能簡單實現(xiàn)方法示例
相關(guān)文章
jQuery實現(xiàn)高亮顯示網(wǎng)頁關(guān)鍵詞的方法
這篇文章主要介紹了jQuery實現(xiàn)高亮顯示網(wǎng)頁關(guān)鍵詞的方法,涉及jquery針對頁面字符串的遍歷與正則替換的相關(guān)技巧,非常具有實用價值,需要的朋友可以參考下2015-08-08運用jQuery定時器的原理實現(xiàn)banner圖片切換
banner圖片切換效果,在一些企業(yè)網(wǎng)站上經(jīng)常會碰到,本文運用jQuery定時器的原理實現(xiàn)banner圖片切換,感興趣的朋友可以學(xué)習(xí)下2014-10-10基于jquery實現(xiàn)鼠標(biāo)滾輪驅(qū)動的圖片切換效果
這篇文章主要介紹了基于jquery實現(xiàn)鼠標(biāo)滾輪驅(qū)動的圖片切換效果,操作簡單,適合用在產(chǎn)片展示網(wǎng)站中,需要的朋友可以參考下2015-10-10jQuery jqgrid 對含特殊字符json 數(shù)據(jù)的 Java 處理方法
在網(wǎng)頁上使用 json 數(shù)據(jù),如果數(shù)據(jù)中含有特殊字符,會比較麻煩。2011-01-01jQuery實現(xiàn)點擊圖標(biāo)div循環(huán)放大縮小功能
這篇文章主要介紹了jQuery實現(xiàn)點擊圖標(biāo)div循環(huán)放大縮小功能,這是一個很常見很基礎(chǔ)的功能,下面小編通過實例代碼給大家介紹,需要的朋友可以參考下2018-09-09