js tr控制下面的tbody隱藏和顯示

2019-11-21 01:40:36

字體：大中小

來源：轉載

供稿：網友

用的核心代碼
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><a href="http://m.survivalescaperooms.com/">武林網</a></td></tr>     </tbody>     <tr><td>小說</td></tr>     <tbody style="display:none">         <tr><td><a >看書了文學網</a></td></tr>     </tbody> </table> </body> </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

上一篇：javascript網頁關鍵字高亮代碼

下一篇：js可拖動的后臺界面