用Javascript，DHTML控制表格的某一列的显示与隐藏
Posted Samve
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用Javascript，DHTML控制表格的某一列的显示与隐藏相关的知识，希望对你有一定的参考价值。
<!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控制表格的某一列的显示与隐藏的主要内容，如果未能解决你的问题，请参考以下文章