首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

求一段JavaScript,让报表一部分显示或不显示

2012-08-01 
求一段JavaScript,让表格一部分显示或不显示table border1trtd width280 rowspan3Select/

求一段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>
最简单的实现方式就是这样,看能不能帮到你
[解决办法]

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">  cellB  </td></tr></table></body></html> 

热点排行