js进行操作table隐藏与显示查询
来源：互联网 发布：java取整 编辑：程序博客网 时间：2024/05/18 03:00
Css样式：
js文件：
/*这是概括的是评价总数：总数，好评总人数，差评总次数*/ .sfont{ font-size: 12px; color: #8C8C8C; text-align: center; } .docname{ width:30%; color: #333; font-size: 13px; margin-right: 0px; text-align:right; } .dnameinfo{ text-align: center; } .doctab{ height:40px; margin:0px 2% 0px 2%; width:96%; font-size:16px; border-collapse:collapse; } .doctab td{ text-align:center; width:50%; } /*虚线的画法*/ .dashed-line{ border-top:1px dashed #cccccc;height: 1px;overflow:hidden; } .specific_info{ display: none; } JSP文件:
</head><body><div class="top_total"><div id="mask" class="mask"> <div class="panel"> <table class="search_table_top" cellspacing="0" cellpadding="0" border="0" width="0"> <tr> <td> <input type="text" class="texstyle" placeholder="请输入要搜索的名"> </td> <td class="pic_td"><a href="#" id="canceltext" class="ghost_buttom">取消</a></td> </tr> </table> </div></div><div id="mask1" class="mask1"></div><div class="top_info"><table width="0" border="0" cellpadding="0" cellspacing="0" class="depar_table_top"> <tr> <td><a href="index.html" class="ke_bg_top"><img src="images/icon_left.png" class="icon_pic15"/> 评价内容</a></td> <td class="pic_td"> <a href="#" id='msearch' class="ke_bg_top"><img src="images/icon_search.png" class="icon_pic25"></a> </td> </tr></table> </div></div><div style="margin:40px 0px 70px 0px" class="allinfo"><!-- 进行迭代数据 --><c:forEach items="${list}" varStatus="num" var="val"> <a href="#" class="ke_bg" onClick="deptclick(this)" etape="${num.index}"> <table width="0" border="0" cellpadding="0" cellspacing="0" class="depar_table etape${num.index}"> <tr> <td style="width:30%;color: #333;">${val.dept}</td> <td><span class="sfont">(人数:${val.doctorcount }人 好评:${val.goodreputation } 差评:${val.badreputation })</span></td> <td class="pic_td"><img src="images/collapsed.gif" width="20px" height="20px" /> </tr> </table> </a> <div class="specific_info${num.index}"> <c:forEach items="${val.doctorlist}" varStatus="nvnum" var="data"> <div class="dashed-line"></div> <a href="/divcss/doctorinfo?id=${data.id}" id="id${num.index}${nvnum.index}"> <table width="0" border="0" cellpadding="0" cellspacing="0" class="doctab"> <tr> <td class="docname">${data.name}</td> <td style="width: 40%"> <span class="sfont dnameinfo">(好评:${data.nicerepution} 差评:${data.badrepution})</span></td> <td class="pic_td"><img src="images/icon_right.png" width="20px" height="20px" style="display:none" /> <img src="images/pic_yuyue_xiala.png" width="20px" height="20px"/></td> </tr> </table> </a> </c:forEach> </div> <div class="line_index"></div></c:forEach></div><script type="text/javascript" src="js/jquery.js"></script></body></html>js文件：
//进行对js代码进行优化与面向对象的书写 var ProcessDept=function(){ //变量的声明 var $tabId=$(".doctab"); var $tabTrId=$(".doctab tr"); var $deptId=$(".ke_bg"); var $deptTab=$(".depar_table"); var $tlineId=$(".dashed-line"); var $deptLine=$(".line_index"); //进行函数的定义 return{ showAll:function(){ for(var i=0;i<$deptId.length;i++){ $($deptId[i]).show(); $($deptLine[i]).show(); } for(var j=0;j<$tabId.length;j++){ $($tabId[j]).show(); $($tlineId[j]).show(); } }, imgechange:function(){ for(var i=0;i<$deptTab.length;i++){ $(".etape"+i+" tr").children("td").eq(2).find("img").attr("src","images/collapsed.gif"); } }, //隐藏 hideAlldoctors:function(){ for(var i=0;i<$tabId.length;i++){ $(".specific_info"+i).hide(); } }, /**搜索框弹出相应事件 **/ showSearchWindow:function(){ //遮层已经覆盖 $(".panel").slideToggle("slow"); $("#mask").css("height","40px") .css("width","100%") .show(); $("#mask1").css("height",$(document).height()-40) .css("width","100%") .css("margin-top","40px") .show(); }, //按下阴影层搜索框往上返回 hideSearchWindow:function(){ $(".panel").slideToggle("slow"); $("#mask").hide(); $("#mask1").hide(); }, //按钮的触发,图片会出现改变，相对应的信息也会出现显示或者的隐藏 deptClickEvent:function(obj){ //这个只是查找的是table的class值 var isrc=$(obj).find("table").attr("class").split(" ")[1]; //获取etape的值 var eta=$(obj).attr("etape"); //进行遍历所有的科室标签值 for(var i=0;i<$deptId.length;i++){ if(i==parseInt(eta)){ continue; } //其他的向下的图片进行转为水平的放置 $(".etape"+i+" tr").children("td").eq(2).find("img").attr("src","images/collapsed.gif"); //然后隐藏所有的下拉选的东西 $(".specific_info"+i).hide(); } //换图片的效果 var imgobj=$("."+isrc+" tr").children("td").eq(2).find("img"); var img1=imgobj.attr("src"); if(img1=="images/collapsed.gif"){ imgobj.attr("src","images/expanded.gif"); }else{ imgobj.attr("src","images/collapsed.gif"); } //获取隐藏的每个科div var myclass=$(obj).next().attr("class"); //进行向下滑动 $("."+myclass).slideToggle("slow"); }, compareToDoctorText:function(){ //获取table的全部第一行的所有的字符 //进行数组的添加 var arr =[]; for(var i=0;i<$tabTrId.length;i++) { //获取的第1列的值 var oprice=$($tabTrId[i]).children("td").eq(0).text(); //获取相应的字符存到相应的字符串当中 arr[i]=oprice; } //存放table的坐标的值 var numArray=[]; var num=0; var texvalue=new RegExp($(".texstyle").val()); for(var i=0;i<arr.length;i++){ //获取相应的table的坐标 //判断table里面的查询的内容是否与我键入的字符串相等，如果相等就为true var bp=texvalue.test(arr[i]); if(bp){ num++; numArray.push(i); } } //遮层显示 $("#mask1").hide(); if(num==0){ //一个都没有匹配到 $(".allinfo").hide(); }else if(num==$tabTrId.length){ //匹配到了全部，那就只显示科 $(".allinfo").show(); this.showAll(); this.imgechange(); this.hideAlldoctors(); }else{ for(var j=0;j<$tabId.length;j++){ var msun=0; for(var i=0;i<numArray.length;i++){ //减少遍历的次数 if(numArray[i]==j){ var dept= $($tabId[j]).attr("class"); $("."+dept).parent("a").parent().show(); $($tabId[j]).show(); $($tlineId[j]).show(); msun++ break; } } if(msun==0){ $($tabId[j]).hide(); $($tlineId[j]).hide(); } } //进行隐藏其他的科 for(var i=0;i<$tabId.length;i++){ var othernum=0; for(var z=0;z<numArray.length;z++){ var data=$($tabId[numArray[z]]).parent("a").attr("id"); var num=parseInt(data.substring(2,3)); if(num==i){ othernum++; break; } } if(othernum==0){ $(".specific_info"+i).prev().hide(); $(".specific_info"+i).next().hide(); } } //进行图片的切换 for(var z=0;z<numArray.length;z++){ var data=$($tabId[numArray[z]]).parent("a").attr("id"); var num=parseInt(data.substring(2,3)); $(".etape"+num+" tr").children("td").eq(2).find("img").attr("src","images/expanded.gif"); } } } } }(); $(function(){ ProcessDept.imgechange(); ProcessDept.hideAlldoctors(); /** *搜索框弹出相应事件 **/ $("#msearch").click(function(){ ProcessDept.showSearchWindow(); }); $("#canceltext,#mask1").click(function(){ ProcessDept.hideSearchWindow(); }); //下面是进行查询 $(".texstyle").keyup(function(){ //进行初始化 ProcessDept.compareToDoctorText(); }); }); function deptclick(obj){ ProcessDept.deptClickEvent(obj); } 0 0
- js进行操作table隐藏与显示查询
- table表格js简单操作隐藏与显示出现结构错乱解决方法
- JS控制table显示或隐藏
- JS控制table显示或隐藏
- js中标签的显示与隐藏操作hide&show
- JS 结点（属性操作）隐藏与显示（display）
- 使用js对table单元格隐藏显示操作出现单元格叠加问题
- table 行的显示与隐藏
- .net table行的显示与隐藏
- JS隐藏与显示字符
- Vue.js进行查询操作
- js控制隐藏或显示table的某一行
- 通过JS，选取radio时显示/隐藏table的功能
- js显示隐藏 table 的行和列
- table 隐藏显示列
- js/jquery操作div显示或隐藏
- js操作div的隐藏和显示
- js隐藏table 列
- VS10x Comments Extender
- Ubuntu 忘记登录密码
- 阿里手机看房间卡萨分解落实的就看附件是看了
- 系统学习数字图像处理之形态学分析补充（灰度级处理）
- Flex学习笔记（八）——事件（event）
- js进行操作table隐藏与显示查询
- js获取回车键等键盘操作
- redhat下查看cpu，内存等系统性能使用情况
- 跨平台Flash(RTMP)播放器的实现（一）
- 设计模式（单例设计模式）
- 云服务模式：SaaS、PaaS和IaaS，哪一种适合你？
- android系统重新刷ROM简记（一）
- 心跳连接的替换--性能提升（comet)
- Android中SurfaceView的使用详解
