js实现表格筛选功能

本应用就两个主要实现：

1.表格的编号和班级之间的命名关系

请看图：将组名和个人信息联表格联系起来，这样会很好的操作表格

超文本标记语言代码：

tr class=' parent ' id=' row _ 01 ' TD col span=' 3 '前台设计组/td/tr tr class='child_row_01'td张三/tdtd男/tdtd浙江宁波/td/tr tr class='child_row_01'td李四/tdtd男/tdtd浙江宁波/td/tr tr class='child_row_01'td胡歌/tdtd男/tdtd浙江宁波/TD/tr tr class=' parent ' id=' row _ 02 ' TD col span=' 3 '前台开发组/td/tr tr class='child_row_02'td李三/tdtd男/tdtd浙江宁波/td/tr tr class='child_row_02'td张无忌/tdtd男/tdtd浙江宁波/td/tr tr class='child_row_02'td孔子/tdtd男/tdtd浙江宁波td/tr2 .就是筛选功能的使用：使用过滤器联合包含将输入框的字加入包含进行筛选

爪哇岛描述语言代码：

//设置列表查询$('#filterName ').向上键(function(){ $(“table t body tr”)).停止()。hide() //将tbody中的tr都隐藏。筛选器(' :包含'($(this)).val())' ')').show()；//,将符合条件的筛选出来});下面是完整代码：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 '标题表格应用/title style * { margin : 0；padd : 0；} .box { border: 1px固体# 000margin:50px汽车；宽度： 340像素；padding: 10px 10px }。箱式工作台{ margin: auto}。盒子。机顶盒{ width: 303pxmargin: 5px汽车；} .箱式工作台tr td，th { padding: 5px 30px文本对齐：中心；} .盒子桌子。父级{ background:浅灰色；} .选中{ background: gray！重要；} .选择高度{ background: darkseagreen！重要；}/style/head dyscript src=' http :http://app。bdimg。com/libs/jquery/2。1 .4/jquery。量滴js//script script $(function(){//默认让王五选中$(“tr :包含(”王五')').addClass('selectHeight') //点击让其展示出列表默认让其都隐藏$('.方框tr.parent ').单击(function () { $(this)).toggleClass('选定')。兄弟姐妹('。child_' this.id).停止()。toggle()；}).单击();//此行代码表示要立即执行//设置列表查询$('#filterName ').向上键(function(){ $(“table t body tr”)).停止()。hide() //将tbody中的tr都隐藏。筛选器(' :包含'($(this)).val())' ')').show()；//,将符合条件的筛选出来});});/script div class=' box ' div class=' box-top ' span筛选：/span put type=' text ' id=' filter name '/div表和tr th姓名/th性别/th暂住地/th/tr/ad t正文tr class=' parent ' id=' row _ 01 ' TD col span=' 3 '前台设计组/td/tr tr class='child_row_01'td张三/tdtd男/tdtd浙江宁波/td/tr tr class='child_row_01'td李四/tdtd男/tdtd浙江宁波/td/tr tr class='child_row_01'td胡歌/tdtd男/tdtd浙江宁波/TD/tr tr class=' parent ' id=' row _ 02 ' TD col span=' 3 '前台开发组/td/tr tr class='child_row_02'td李三/tdtd男/tdtd浙江宁波/td/tr tr class='child_row_02'td张无忌/tdtd男/tdtd浙江宁波TD/tr/tr class='child_row_02'td孔子/tdtd男/tdtd浙江宁波/TD/tr tr class=' parent ' id=' row _ 03 ' TD col span=' 3 '后台设计组/td/tr tr class='child_row_03'td王五/tdtd男/tdtd浙江宁波/td/tr tr class='child_row_03'td单志永/tdtd男/tdtd浙江宁波/td/tr tr class='child_row_03'td刘粒粒/tdtd男/tdtd浙江宁波/TD/tr/t正文/表格/div/正文/html以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！