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);
}
1633
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
