js tr控制下面的tbody隐藏和显示


答案：用的核心代码
function $(obj){ 
    return document.getElementById(obj); 
} 
window.onload = function(){ 
    var table = document.getElementById("myTable"); 
    //如果在表格区域内产生单击 
    table.onclick = function(e){ 
        var e = window.event||e,target = e.srcElement||e.target; 

        //得到tr 
        while(target.tagName.toLowerCase() != "tr"){ 
            target = target.parentNode; 
        } 

        var i = target.rowIndex; 
        //单击单行的Tr的话就是控制tr + 1的隐藏和显示 

        if(i%2 == 0){ 
                        var nrs = table.rows[i + 1].parentNode.style; 
            nrs.display = nrs.display == "none"?"":"none"; 
        } 
    } 
} 

</script><!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> 
</head> 
<script type="text/javascript"> 
function $(obj){ 
    return document.getElementById(obj); 
} 
window.onload = function(){ 
    var table = document.getElementById("myTable"); 
    //如果在表格区域内产生单击 
    table.onclick = function(e){ 
        var e = window.event||e,target = e.srcElement||e.target; 
         
        //得到tr 
        while(target.tagName.toLowerCase() != "tr"){ 
            target = target.parentNode; 
        } 
         
        var i = target.rowIndex; 
        //单击单行的Tr的话就是控制tr + 1的隐藏和显示 
          
        if(i%2 == 0){ 
                        var nrs = table.rows[i + 1].parentNode.style; 
            nrs.display = nrs.display == "none"?"":"none"; 
        } 
    } 
} 

</script> 
<body> 
<table border="1" id="myTable"> 
    <tr><td>脚本</td></tr> 
    <tbody style="display:none"> 
        <tr><td>脚本之家</td></tr> 
    </tbody> 
    <tr><td>小说</td></tr> 
    <tbody style="display:none"> 
        <tr><td>看书了文学网</td></tr> 
    </tbody> 
</table> 
</body> 
</html>

  [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
上一个：javascript之更有效率的字符串替换
下一个：二级域名或跨域共享Cookies的实现方法
更多图片编程知识: