一个简单的点击后显示与隐藏表格的例子

最新推荐文章于 2024-08-20 15:50:34 发布

cncco

最新推荐文章于 2024-08-20 15:50:34 发布

阅读量1.5k

点赞数

分类专栏： HTML JS 文章标签： button border

JS 同时被 2 个专栏收录

37 篇文章 0 订阅

订阅专栏

HTML

35 篇文章 0 订阅

订阅专栏

一个简单的点击后显示与隐藏表格的例子

 
 <!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=gb2312" />
<title>一个简单的点击后显示与隐藏表格的例子</title>
<script type="text/javascript">
function toggle( targetId ) {
if (document.getElementById){
 target = document.getElementById( targetId );
  if ( target.style.display == "none") {
   target.style.display = ""; 
  } else { 
   target.style.display = "none";
  }
 }
}
</script>
</head>
<body>
<table width="355" border="0" cellpadding="0" cellspacing="1" bgcolor="#999999">
  <tr>
    <td height="30" bgcolor="#FFFFFF"><input name="aa" type="button" value="确定" onclick="toggle('aaa');" />
点这里显示/隐藏 </td>
  </tr>
  <tr id="aaa">
    <td height="30" bgcolor="#F3F3F3"> </td>
  </tr>
  <tr>
    <td height="30" bgcolor="#FFFFFF"><input name="aa2" type="button" value="确定" onclick="toggle('bbb');" />
点这里显示/隐藏 </td>
  </tr>
  <tr id="bbb">
    <td height="30" bgcolor="#F3F3F3"> </td>
  </tr>
  <tr>
    <td height="30" bgcolor="#FFFFFF"><input name="aa3" type="button" value="确定" onclick="toggle('ccc');" />
点这里显示/隐藏 </td>
  </tr>
  <tr id="ccc">
    <td height="30" bgcolor="#F3F3F3"> </td>
  </tr>
</table>
</body>
</html>
 