zoukankan      html  css  js  c++  java
  • 用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;  14%; " id="aaa"><div class="th-inner ">操作者</div><div class="fht-cell"></div></th><th style="text-align: left;  15%; "><div class="th-inner ">操作大类</div><div class="fht-cell"></div></th><th style="text-align: left;  19%; "><div class="th-inner ">操作小类</div><div class="fht-cell"></div></th><th style=" 9%; "><div class="th-inner sortable both">操作结果</div><div class="fht-cell"></div></th><th style="text-align: left;  18%; "><div class="th-inner ">时间</div><div class="fht-cell"></div></th><th style=" 9%; "><div class="th-inner sortable both">风险级别</div><div class="fht-cell"></div></th><th style="text-align: left;  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;  14%; ">admin1</td><td style="text-align: left;  15%; ">管理员管理</td><td style="text-align: left;  19%; ">系统管理员登录</td><td style=" 9%; ">成功</td><td style="text-align: left;  18%; ">2018-08-19 12:18:33</td><td style=" 9%; ">信息</td><td style="text-align: left;  16%; ">系统管理</td></tr><tr data-index="1"><td style="text-align: left;  14%; ">admin1</td><td style="text-align: left;  15%; ">管理员管理</td><td style="text-align: left;  19%; ">系统管理员登录</td><td style=" 9%; ">成功</td><td style="text-align: left;  18%; ">2018-08-19 10:46:49</td><td style=" 9%; ">信息</td><td style="text-align: left;  16%; ">系统管理</td></tr><tr class="row-color" data-index="2"><td style="text-align: left;  14%; ">admin1</td><td style="text-align: left;  15%; ">管理员管理</td><td style="text-align: left;  19%; ">系统管理员登录</td><td style=" 9%; ">失败</td><td style="text-align: left;  18%; ">2018-08-19 10:46:31</td><td style=" 9%; ">信息</td><td style="text-align: left;  16%; ">系统管理</td></tr><tr data-index="3"><td style="text-align: left;  14%; ">admin1</td><td style="text-align: left;  15%; ">管理员管理</td><td style="text-align: left;  19%; ">系统管理员登录</td><td style=" 9%; ">成功</td><td style="text-align: left;  18%; ">2018-08-19 10:42:10</td><td style=" 9%; ">信息</td><td style="text-align: left;  16%; ">系统管理</td></tr><tr data-index="4"><td style="text-align: left;  14%; ">admin1</td><td style="text-align: left;  15%; ">管理员管理</td><td style="text-align: left;  19%; ">系统管理员登录</td><td style=" 9%; ">成功</td><td style="text-align: left;  18%; ">2018-08-19 09:22:21</td><td style=" 9%; ">信息</td><td style="text-align: left;  16%; ">系统管理</td></tr><tr data-index="5"><td style="text-align: left;  14%; ">admin1</td><td style="text-align: left;  15%; ">管理员管理</td><td style="text-align: left;  19%; ">系统管理员登录</td><td style=" 9%; ">成功</td><td style="text-align: left;  18%; ">2018-08-19 09:21:43</td><td style=" 9%; ">信息</td><td style="text-align: left;  16%; ">系统管理</td></tr><tr data-index="6"><td style="text-align: left;  14%; ">admin1</td><td style="text-align: left;  15%; ">管理员管理</td><td style="text-align: left;  19%; ">系统管理员登录</td><td style=" 9%; ">成功</td><td style="text-align: left;  18%; ">2018-08-19 09:18:44</td><td style=" 9%; ">信息</td><td style="text-align: left;  16%; ">系统管理</td></tr><tr data-index="7"><td style="text-align: left;  14%; ">admin1</td><td style="text-align: left;  15%; ">管理员管理</td><td style="text-align: left;  19%; ">系统管理员登录</td><td style=" 9%; ">成功</td><td style="text-align: left;  18%; ">2018-08-19 09:10:34</td><td style=" 9%; ">信息</td><td style="text-align: left;  16%; ">系统管理</td></tr><tr data-index="8"><td style="text-align: left;  14%; ">admin1</td><td style="text-align: left;  15%; ">管理员管理</td><td style="text-align: left;  19%; ">系统管理员登录</td><td style=" 9%; ">成功</td><td style="text-align: left;  18%; ">2018-08-19 09:03:42</td><td style=" 9%; ">信息</td><td style="text-align: left;  16%; ">系统管理</td></tr><tr data-index="9"><td style="text-align: left;  14%; ">admin1</td><td style="text-align: left;  15%; ">管理员管理</td><td style="text-align: left;  19%; ">系统管理员登录</td><td style=" 9%; ">成功</td><td style="text-align: left;  18%; ">2018-08-19 09:01:57</td><td style=" 9%; ">信息</td><td style="text-align: left;  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>
  • 相关阅读:
    分布式哈希和一致性哈希算法
    消息队列rabbitmq的五种工作模式(go语言版本)
    Mysql查询缓存
    数据库的三大设计范式
    二叉树的常见算法
    消息队列选型分析
    Mysql防止索引失效原则
    Mysql索引优化单表、两表、三表实践
    数据结构 【栈与队列】
    谷歌实用插件
  • 原文地址:https://www.cnblogs.com/samve/p/9960969.html
Copyright © 2011-2022 走看看