求一段JavaScript,让报表一部分显示或不显示
日期：2014-05-16 浏览次数：20351 次
求一段JavaScript,让表格一部分显示或不显示
<table border="1">
<tr>
<td width="280" rowspan="3">
Select
</td>
<td width="660">
<input type="radio" name="sel" id="sel" onclick="display()" checked>不表示<br/><br/>
<input type="radio" name="sel" id="sel" onclick="display()">表示<br/>
</td>
</tr>
<tr>
<td width="660">
cellA
</td>
</tr>
<tr>
<td width="660">
cellB
</td>
</tr>
</table>
求一段JavaScript,当选不表示时，「cellA」、「cellB」都隐藏，
而当选表示时，都显示！
------解决方案--------------------
<table border="1">
<tr>
<td width="280" rowspan="3">
Select
</td>
<td width="660">
<input type="radio" name="sel" id="sel" onclick="display(true)" checked>不表示<br/><br/>
<input type="radio" name="sel" id="sel" onclick="display(false)">表示<br/>
</td>
</tr>
<tr id="test1">
<td width="660">
cellA
</td>
</tr>
<tr id="test2">
<td width="660">
cellB
</td>
</tr>
</table>
<script>
document.getElementById("test1").style.display="none";
document.getElementById("test2").style.display="none";
function display(flag){
if(flag){
document.getElementById("test1").style.display="none";
document.getElementById("test2").style.display="none";
}else{
document.getElementById("test1").style.display="block";
document.getElementById("test2").style.display="block";
}
}
</script>
最简单的实现方式就是这样，看能不能帮到你
------解决方案--------------------
<table border="1">
<tr>
<td width="280" rowspan="3">
Select
</td>
<td width="660">
<input type="radio" name="sel" id="sel" onclick="display()" checked>不表示<br/><br/>
<input type="radio" name="sel" id="sel" onclick="display()">表示<br/>
</td>
</tr>
<tr>
<td width="660">
cellA
</td>
</tr>
<tr>
<td width="660">
cellB
</td>
</tr>
</table>
求一段JavaScript,当选不表示时，「cellA」、「cellB」都隐藏，
而当选表示时，都显示！
------解决方案--------------------
<table border="1">
<tr>
<td width="280" rowspan="3">
Select
</td>
<td width="660">
<input type="radio" name="sel" id="sel" onclick="display(true)" checked>不表示<br/><br/>
<input type="radio" name="sel" id="sel" onclick="display(false)">表示<br/>
</td>
</tr>
<tr id="test1">
<td width="660">
cellA
</td>
</tr>
<tr id="test2">
<td width="660">
cellB
</td>
</tr>
</table>
<script>
document.getElementById("test1").style.display="none";
document.getElementById("test2").style.display="none";
function display(flag){
if(flag){
document.getElementById("test1").style.display="none";
document.getElementById("test2").style.display="none";
}else{
document.getElementById("test1").style.display="block";
document.getElementById("test2").style.display="block";
}
}
</script>
最简单的实现方式就是这样，看能不能帮到你
------解决方案--------------------
- HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
window.onload = function() {
var o = document.getElementsByTagName('tr');
for (var i = 0; i < o.length; i ++) if (o[i].className == 'hide') o[i].style.display = "none";
}
function display(x) {
var o = document.getElementsByTagName('tr');
for (var i = 0; i < o.length; i ++) {
if (o[i].className == 'hide') x == 0 ? o[i].style.display = "none" : o[i].style.display = "";
}
}
</script>
</head>
<body>
<table border="1">
<tr>
<td width="280" rowspan="3">
Select
</td>
<td width="660">
<input type="radio" name="sel" onclick="display(0)" checked>不表示<br/><br/>
<input type="radio" name="sel" onclick="display(1)">表示<br/>
</td>
</tr>
<tr class="hide">
<td width="660">
cellA
</td>
</tr>
<tr class="hide">
<td width="660">
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
