javascript表格內容的展開和摺疊

時間 2019-12-06 標籤 javascript 表格內容展開摺疊
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格內容的展開和摺疊</title>
    <style>
        h2,h5,#tooltipMsg,p {
            white-space: nowrap;
        }
        td {
            border: 1px solid #ccc;
            height: 50px;
            text-align: center;
            font-size: 10pt;
            padding: 2px;
        }
    </style>
</head>
<body>
<table id="tableOutIn" border="1" width="500">
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
</table>
<input type="button" id="openRow" data-statu="true" value="展開/收縮" />
    <script>
        window.onload=function(){
            var tableOutIn=function(e,type){  //沒有var聲明在ie上會報錯
                if(!type){
                    e.style.display="none";//隱藏指定的行元素
                }
                else {
                    e.style.display="table-row"; //table-row設置此元素會做爲一個表格行顯示
                }
            }
            var _tableOutIn=document.getElementById("tableOutIn"),statu=true;
            document.getElementById("openRow").onclick=function(){ //展開一行 openRow
                statu=!statu;
                tableOutIn(_tableOutIn.rows[0],statu);
            }
        }
    </script>
</body>
</html>