本應(yīng)用就兩個(gè)主要實(shí)現(xiàn)：

1.表格的id 和 class之間的命名關(guān)系

請(qǐng)看圖： 將組名和個(gè)人信息聯(lián)表格聯(lián)系起來(lái)，這樣會(huì)很好的操作表格

HTML代碼：

前臺(tái)設(shè)計(jì)組張三男浙江寧波李四男浙江寧波胡歌男浙江寧波前臺(tái)開(kāi)發(fā)組李三男浙江寧波張無(wú)忌男浙江寧波孔子男浙江寧波

2.就是篩選功能的使用：使用filter聯(lián)合contains將輸入框的字加入contains進(jìn)行篩選

javascript代碼：

//設(shè)置列表查詢

$("#filterName").keyup(function () {

$("table tbody tr").stop().hide() //將tbody中的tr都隱藏

.filter(":contains('"+($(this).val())+"')").show(); //，將符合條件的篩選出來(lái)

});

下面是完整代碼：

表格應(yīng)用

*{

margin: 0;

padding: 0;

}

.box{

border: 1px solid #000;

margin:50px auto;

width: 340px;

padding: 10px 10px;

}

.box table{

margin: auto;

}

.box .box-top{

width: 303px;

margin: 5px auto;

}

.box table tr td,th{

padding: 5px 30px;

text-align: center;

}

.box table .parent{

background: lightgray;

}

.selected{

background: gray !important;

}

.selectHeight{

background: darkseagreen !important;

}

$(function () {

//默認(rèn)讓王五選中

$("tr:contains('王五')").addClass("selectHeight")

//點(diǎn)擊讓其展示出列表 默認(rèn)讓其都隱藏

$(".box tr.parent").click(function () {

$(this)

.toggleClass("selected")

.siblings(".child_"+this.id).stop().toggle();

}).click();//此行代碼表示要立即執(zhí)行

//設(shè)置列表查詢

$("#filterName").keyup(function () {

$("table tbody tr").stop().hide() //將tbody中的tr都隱藏

.filter(":contains('"+($(this).val())+"')").show(); //，將符合條件的篩選出來(lái)

});

});

篩選：

姓名性別暫住地

前臺(tái)設(shè)計(jì)組張三男浙江寧波李四男浙江寧波胡歌男浙江寧波前臺(tái)開(kāi)發(fā)組李三男浙江寧波張無(wú)忌男浙江寧波孔子男浙江寧波后臺(tái)設(shè)計(jì)組王五男浙江寧波單志永男浙江寧波劉粒粒男浙江寧波

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！

總結(jié)

以上是生活随笔為你收集整理的html表格筛选,js实现表格筛选功能的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。