用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;}
随机推荐
- RadioButton使用
RadioButton和CheckBox差不多,这里只写一个,因为我本身不是学andorid,所以就当给自己留一个备份,省的每次用到都需要代码敲一次,很麻烦 1.如果想选中时想改变颜色可以设置一个xm ...
- MySQL的并行复制多线程复制MTS(Multi-Threaded Slaves)
MySQL的并行复制多线程复制MTS(Multi-Threaded Slaves) http://www.tuicool.com/articles/m2Unmeq 姜承饶 简称MTS:基于binlog ...
- mysql连接池不能回避的wait timeout问题（转）
起因 我们的项目组一直在使用albianj作为开发框架在开发应用.使用至今倒也是没有出现很大的问题,但最近加过监控的接口基本上都会在使用一段时间后,突然之间执行数据库操作变得很慢.虽然会变慢,但持续的 ...
- Python 全栈开发三 python基础 条件与循环
一. 条件语句 python条件语句是根据一条或多条语句的执行结果的真假(True Or False)来决定代码块的执行. 而执行内容可以多行,以缩进来区分表示同一范围. 1.Python判断条件真假 ...
- mysql数据库字段类型详解
MySQL支持大量的列类型,它可以被分为3类:数字类型.日期和时间类型以及字符串(字符)类型.本节首先给出可用类型的一个概述,并且总结每个列类型的存储需求,然后提供每个类中的类型性质的更详细的描述. ...
- kdeplot(核密度估计图) & distplot
Seaborn是基于matplotlib的Python可视化库. 它提供了一个高级界面来绘制有吸引力的统计图形.Seaborn其实是在matplotlib的基础上进行了更高级的API封装,从而使得作图 ...
- CentOS 7 时间, 日期设置 (含时间同步）
from http://blog.itnmg.net/centos-7-time-date/ yum install ntp //安装ntp服务systemctl enable ntpd //开机启动 ...
- cocos2d-x JS 纯代码渲染Lable描边
/** * Enables shadow style and sets color, offset and blur radius styles. * @param {cc.Color} shadow ...
- 一步一步学Python(3) 基础补充
最近在系统学习Python,以MOOC上面的一套Python3的课程为基础.本文主要总结一下基础部分的关键点. 1.python基本数据类型 2.python运算符 3.构建简洁高效的IDE环境 4. ...
- layui透明弹框
效果: layui.use('layer', function () { var layer = layui.layer; var str = '<div>'; str += '<d ...