用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控制表格的某一列的显示与隐藏的更多相关文章
- JAVASCRIPT+DHTML实现表格拖动
自已做的,本来想在网上找前辈们做的,可是总找不到这种例子,要么找出来的太复杂, 要么就没法用,索性自己写了一个.看看还可以用!贡献出来,估计和我一样的菜鸟用的着! <html> <s ...
- js控制表格单双行颜色交替显示
<script language="JavaScript"> window.onload = function() { var Table=document.getEl ...
- 使用Bootstrap实现表格列的显示与隐藏
来人,上效果图 走官方通道 1.引入样式文件(去github下载样式文件) <!--插件开--> <link rel="stylesheet" href=&quo ...
- js控制easyui datagrid列的显示和隐藏
easyui datagrid 列隐藏和显示 $('#grid').datagrid('hideColumn','列field'); //把hideColumn换成showColumn 即为显示列
- 控制HTML元素的显示与隐藏——display和visibility
有些时候我们需要根据某些条件来控制Web页面中的HTML元素显示还是隐藏,可以通过display或visibility来实现.通过下面的例子了解display和visibility的区别,简单的例子代 ...
- C# 控制win7任务栏、开始菜单的显示与隐藏
因为是做显示程序,故需要控制任务栏与开始菜单的显示与隐藏,这样就美观些.不啰嗦.直接上代码: using System; using System.Collections.Generic; using ...
- javascript生成表格增删改查 JavaScript动态改变表格单元格内容 动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行
jsp页面表格布局Html代码 <body onload="show()"> <center> <input type="text" ...
- AppBoxPro - 细粒度通用权限管理框架（可控制表格行内按钮）源码提供下载
特别声明: 提供的源代码已经包含了 AppBoxPro 的全部源代码,用 VS2012 打开项目后,直接 Ctrl+F5 可以运行起来(默认使用VS自带的LocalDB数据库). FineUIPro是 ...
- CSS控制表格（table）样式
CSS控制表格样式 /* 合并边框重叠部分 */ table{border-collapse:collapse;} /* 单元格边框 */ td{border:1px solid #A7AEB1;}
随机推荐
- vue-3.0创建项目
.npm install --global @vue/cli .npm install -g @vue/cli-init .vue init webpack my-project
- 导出mysql数据库数据
1.phpmyadmin导出 ) AS `a` LEFT JOIN ( SELECT * FROM `newerp_jifen_order_log` WHERE `content` = '客户确认收货 ...
- emq数据库插件
- Java 基础 常用API (System类，Math类，Arrays， BigInteger，)
基本类型包装类 基本类型包装类概述 在实际程序使用中,程序界面上用户输入的数据都是以字符串类型进行存储的.而程序开发中,我们需要把字符串数据,根据需求转换成指定的基本数据类型,如年龄需要转换成int类 ...
- 使用 Oracle Data Access Components连接oracel
使用微软自带的oracle连接类,在framework4.0中被标识为弃用,强行用它开发了Winform程序,发布放到XP上提示: Error System.Data.OracleClient req ...
- delete 删除对象属性
删除属性要直接删.
- map的使用方式之一。
map有返回值 foreach 没得.. 得到结果 可以把里面的值以数组的方式取出来: 举例:
- 谷歌启用抓取JavaScript，应对方案！
谷歌启用了抓取JavaScript来深入了解网站,这样,如果网站或黑页是加了跳转代码或判断代码,很有可能将会被识别出来.虽然目前只是谷歌启用识别JavaScript文件,但国内搜索引擎很可能也会跟着模 ...
- [pat]A1072 Gas Station
这道题的结点编号是字符串类型,处理的过程很有意思,用getID将house和GasStation进行区分 #include<bits/stdc++.h> using namespace s ...
- 获取 Google USB 驱动程序
获取 Google USB 驱动程序 另请参阅 安装 USB 驱动程序 使用硬件设备 使用任何 Google Nexus 设备进行 ADB 调试时,只有 Windows 需要 Google ...