树行表格实现基本思想

<html>
<head>
<script language="javascript">
function expand(obj){
 
 var tbl = document.getElementById("table0");
 var len = tbl.rows.length;
 var tr1 = obj.parentNode.parentNode;
 var beginRow = tr1.rowIndex+1;
 var img0=obj;

 if(img0.alt=="点击展开")
 {
  img0.src="D://2.bmp";
  img0.alt="点击收缩";
  
  for(index = beginRow; index<len&&tbl.rows[index].id!="tr1"; index++)
  {
   
   tbl.rows[index].style.display='block';
   
  }
 }else
  {
  img0.src="D://1.bmp";
  img0.alt="点击展开";
  
  for(index = beginRow; index<len&&tbl.rows[index].id!="tr1"; index++)
  {
   
   tbl.rows[index].style.display='none';
   
  }
 }
 
}
</script>
</head>
<body>
<table id='table0' >
 <tr id= "tr1">
  <td>
   <img src="D:/1.bmp" id=img onClick=expand(this) align=right alt="点击展开"/>
  </td>
  <td>
   一级
   </td>
 </tr>
 <tr id= "tr2" style="display:none">
  <td>
  </td>
  <td>
   &nbsp;&nbsp;二级
  </td>
 </tr>
 <tr id= "tr2" style="display:none">
  <td>
  </td>
  <td>
   &nbsp;&nbsp;二级
  </td>
 </tr>
 <tr id= "tr1">
  <td>
   <img src="D:/1.bmp" id=img onClick=expand(this) align=right />
  </td>
  <td>
   一级
   </td>
 </tr>
 
</table>
</body>
</html> 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值