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