用Javascript，DHTML控制表格的某一列的显示与隐藏

时间：2018-11-14 23:13:14 阅读：291 评论：0 收藏：0 [点我收藏+]
标签：tar www row audit www. 成功 click abap aac
<!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>
标签：tar www row audit www. 成功 click abap aac
原文地址：https://www.cnblogs.com/samve/p/9960969.html
踩
(0)
评论一句话评论（0）
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行