用Javascript，DHTML控制表格的某一列的顯示與隱藏
阿新 • • 發佈：2018-11-15
-i div doc bootstra lns fill 成功 oot ini
<!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=utf-8" />
<title>無標題文檔</title>
<link rel="stylesheet" href="http://10.10.1.112/static/libs/bootstrap/css/bootstrap.css">
<script src="http://10.10.1.112/static/libs/jquery/jquery-1.11.2.min.js"></script>
<script src="http://10.10.1.112/static/libs/bootstrap/js/bootstrap.js"></script>
</head>
<body>
<table id="showTb" data-url="/audit/data/" class="table table-bordered table-hover" style="margin-bottom: 0px;" data-query-params="genQueryParams" data-pagination="true" data-cache="false" data-side-pagination="server" data-toggle="table" data-row-style="rowStyle">
<thead>
<tr><th style="text-align: left; width: 14%; " id="aaa"><div class="th-inner ">操作者</div><div class="fht-cell"></div></th><th style="text-align: left; width: 15%; "><div class="th-inner ">操作大類</div><div class="fht-cell"></div></th><th style="text-align: left; width: 19%; "><div class="th-inner ">操作小類</div><div class="fht-cell"></div></th><th style="width: 9%; "><div class="th-inner sortable both">操作結果</div><div class="fht-cell"></div></th><th style="text-align: left; width: 18%; "><div class="th-inner ">時間</div><div class="fht-cell"></div></th><th style="width: 9%; "><div class="th-inner sortable both">風險級別</div><div class="fht-cell"></div></th><th style="text-align: left; width: 16%; "><div class="th-inner ">功能模塊</div><div class="fht-cell"></div></th></tr>
</thead>
<tbody title="雙擊查看詳情"><tr data-index="0"><td style="text-align: left; width: 14%; ">admin1</td><td style="text-align: left; width: 15%; ">管理員管理</td><td style="text-align: left; width: 19%; ">系統管理員登錄</td><td style="width: 9%; ">成功</td><td style="text-align: left; width: 18%; ">2018-08-19 12:18:33</td><td style="width: 9%; ">信息</td><td style="text-align: left; width: 16%; ">系統管理</td></tr><tr data-index="1"><td style="text-align: left; width: 14%; ">admin1</td><td style="text-align: left; width: 15%; ">管理員管理</td><td style="text-align: left; width: 19%; ">系統管理員登錄</td><td style="width: 9%; ">成功</td><td style="text-align: left; width: 18%; ">2018-08-19 10:46:49</td><td style="width: 9%; ">信息</td><td style="text-align: left; width: 16%; ">系統管理</td></tr><tr class="row-color" data-index="2"><td style="text-align: left; width: 14%; ">admin1</td><td style="text-align: left; width: 15%; ">管理員管理</td><td style="text-align: left; width: 19%; ">系統管理員登錄</td><td style="width: 9%; ">失敗</td><td style="text-align: left; width: 18%; ">2018-08-19 10:46:31</td><td style="width: 9%; ">信息</td><td style="text-align: left; width: 16%; ">系統管理</td></tr><tr data-index="3"><td style="text-align: left; width: 14%; ">admin1</td><td style="text-align: left; width: 15%; ">管理員管理</td><td style="text-align: left; width: 19%; ">系統管理員登錄</td><td style="width: 9%; ">成功</td><td style="text-align: left; width: 18%; ">2018-08-19 10:42:10</td><td style="width: 9%; ">信息</td><td style="text-align: left; width: 16%; ">系統管理</td></tr><tr data-index="4"><td style="text-align: left; width: 14%; ">admin1</td><td style="text-align: left; width: 15%; ">管理員管理</td><td style="text-align: left; width: 19%; ">系統管理員登錄</td><td style="width: 9%; ">成功</td><td style="text-align: left; width: 18%; ">2018-08-19 09:22:21</td><td style="width: 9%; ">信息</td><td style="text-align: left; width: 16%; ">系統管理</td></tr><tr data-index="5"><td style="text-align: left; width: 14%; ">admin1</td><td style="text-align: left; width: 15%; ">管理員管理</td><td style="text-align: left; width: 19%; ">系統管理員登錄</td><td style="width: 9%; ">成功</td><td style="text-align: left; width: 18%; ">2018-08-19 09:21:43</td><td style="width: 9%; ">信息</td><td style="text-align: left; width: 16%; ">系統管理</td></tr><tr data-index="6"><td style="text-align: left; width: 14%; ">admin1</td><td style="text-align: left; width: 15%; ">管理員管理</td><td style="text-align: left; width: 19%; ">系統管理員登錄</td><td style="width: 9%; ">成功</td><td style="text-align: left; width: 18%; ">2018-08-19 09:18:44</td><td style="width: 9%; ">信息</td><td style="text-align: left; width: 16%; ">系統管理</td></tr><tr data-index="7"><td style="text-align: left; width: 14%; ">admin1</td><td style="text-align: left; width: 15%; ">管理員管理</td><td style="text-align: left; width: 19%; ">系統管理員登錄</td><td style="width: 9%; ">成功</td><td style="text-align: left; width: 18%; ">2018-08-19 09:10:34</td><td style="width: 9%; ">信息</td><td style="text-align: left; width: 16%; ">系統管理</td></tr><tr data-index="8"><td style="text-align: left; width: 14%; ">admin1</td><td style="text-align: left; width: 15%; ">管理員管理</td><td style="text-align: left; width: 19%; ">系統管理員登錄</td><td style="width: 9%; ">成功</td><td style="text-align: left; width: 18%; ">2018-08-19 09:03:42</td><td style="width: 9%; ">信息</td><td style="text-align: left; width: 16%; ">系統管理</td></tr><tr data-index="9"><td style="text-align: left; width: 14%; ">admin1</td><td style="text-align: left; width: 15%; ">管理員管理</td><td style="text-align: left; width: 19%; ">系統管理員登錄</td><td style="width: 9%; ">成功</td><td style="text-align: left; width: 18%; ">2018-08-19 09:01:57</td><td style="width: 9%; ">信息</td><td style="text-align: left; width: 16%; ">系統管理</td></tr></tbody>
</table>
BookCase:<button onClick="hide(1)">隱</button>-<button onClick="show(1)">顯</button>
<script>
<!--
//初始化時一定要隱一列
function initHide(cell){
obj = document.getElementById("showTb");
for(i=0;i<obj.rows.length;i++){
obj.rows[i].cells[cell].style.display = "none";
}
}
//隱列
function hide(cell){
obj = document.getElementById("showTb");
//obj.style.display = "none";
//obj.rows[0].style.display = "none"; //隱藏第一行
for(i=0;i<obj.rows.length;i++){
obj.rows[i].cells[cell].style.display = "none";
}
}
// 顯列
function show(cell){
obj = document.getElementById("showTb");
for(i=0;i<obj.rows.length;i++)
{
obj.rows[i].cells[cell].style.display = "";
}
}
</script>
</body>
</html>
用Javascript，DHTML控制表格的某一列的顯示與隱藏