用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;}
随机推荐
- rm：删除目录和文件
[root@linux-node- sss]# rm soft.txt //删除文件 rm: remove regular empty file ‘soft.txt’? y [root@linux-n ...
- iOS添加pch文件
1.第一步,创建pch文件 第二步设置pch文件:相对地址,填写$(SRCROOT)/YTCompleteCarSell/PrefixHeader.pch $(SRCROOT)是项目地址/项目名/p ...
- The iOS Simulator deployment target is set to 6.0
XCODE警告 Showing All Messages :-1: The iOS Simulator deployment target is set to 6.0, but the range o ...
- [django]django 3种返回json方法
django 3种返回json方法 1.手动组装字典返回 from django.http import JsonResponse, HttpResponse from django.shortcut ...
- （转）EOS中账户、钱包和密钥的关系
EOS对于账户的设计与ETH有很大的不同,引入了Account账户, Wallet钱包, 钱包密码, Key公私钥, Permission权限等众多概念,刚入门的时候感觉一头雾水.本文希望通过对这些概 ...
- OpenShift Origin 基本命令
用户管理 $ oc login #登陆$ oc logout #注销$ oc login -u system:admin -n default #以系统管理身份登陆并指定项目$ oc login ht ...
- Centos7上安装及配置Apache
Apache HTTP服务器是世界上最流行的Web服务器. 它是一款免费的开源和跨平台的HTTP服务器,提供强大的功能,可以通过各种模块进行扩展. 以下说明介绍如何在CentOS 7机器上安装和管理A ...
- 百度云同同步盘 mac版
百度云同步盘
- python threading acquire release
线程同步 //test.py import threading import time exitFlag = 0 class myThread (threading.Thread): def __in ...
- python socket 老生常谈
没啥可说的,直接看代码 //server import socket s = socket.socket() host = socket.gethostname() print 'host: ', h ...