2.2 HTML/JSP中控制按钮的显示和隐藏与单页面多列表 > 我的程序猿之路：第十二章
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page contentType="text/html" pageEncoding="UTF-8"%>
<html>
<head>
<title>人员信息查询</title>
<script type="text/javascript" src="/jsp/module/innovation/common/innovationCommon.js"></script>
<script type="text/javascript">
$(function(){
sky.renderlist();
$('td[title]').qtip();
$('img[title]').qtip({
position: {
my: 'bottom right',
at: 'top center'
}
});
单选按钮默认选择
var showType = document.getElementsByName('resultsVO.showType')[0].checked=true;
StatisticalApproach(showType);
});
function StatisticalApproach(type){
//alert(type)
if(type==1){
保存按钮隐藏
document.getElementById('abcdef').style.display='none';
$("#statistical1").show();
$("#statistical2").hide();
}else if(type==2){
保存按钮显示
document.getElementById('abcdef').style.display='';
$("#statistical2").show();
$("#statistical1").hide();
}
//分页、排序隐藏项赋值
$.each($("[name='resultsVO.showType']"),function(i,obj){
if($(obj).closest("table").attr("id") == 'e3tableList')
{
obj.value = type;
}
});
}
</script>
</head>
<body class="minWidth" id="list" >
<div class="list_tit">
<strong>人员信息查询</strong>
<div>
</div>
</div>
<div class="list_search_body">
<tr>
<td class="tl">展现方式：</td>
<td class="tr" colspan="3">
<s:radio list="#{'1':'本单位所有人员'}" id="resultsVOshowType" name="resultsVO.showType" onclick="StatisticalApproach(this.value);"></s:radio>
<s:radio list="#{'2':'本单位未上报人员'}" id="resultsVOshowType1" name="resultsVO.showType" onclick="StatisticalApproach(this.value);"></s:radio>
</td>
</tr>
<table align="center" class="list_search_tab">
<tr>
<td colspan="4" align="right">
<input type="button" id="abcdef" name="" value="保存" class="btn" onclick="savePer(${llsize});" />
<input type="button" name="" value="查 询" class="btn" onclick="search();" />
<input type="button" name="" value="清 除" class="btn" onclick="clare();" />
</td>
</tr>
</table>
</div>
<div class="list_con">
<div id="statistical1" style='display:none;'>
<div class="list_search_bar">
<strong> 人员列表1 </strong>
</div>
</div>
<div id="statistical2" align="center">
<div class="list_search_bar" align="left">
<strong></strong>
</div>
<div class="list_search_bar">
<strong> 人员列表2 </strong>
</div>
列表
</div>
</body>
</html>
