JS控制表格的列显示和隐藏

最新推荐文章于 2022-03-15 13:14:11 发布

置顶 cntnn11

最新推荐文章于 2022-03-15 13:14:11 发布

阅读量5.3k

点赞数

分类专栏： php自学笔记文章标签： table class border xhtml list chrome

本文链接：https://blog.csdn.net/cntnn11/article/details/6723636

版权

php自学笔记专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!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>JS控制表格的列显示和隐藏</title>
</head>
<script>
/*
 * 控制表格的列显示和隐藏
 * 使用方法：在网页读取时调用control_show()方法即可。
 * 说明：
 * table_cell_dis()方法为获取 显示/隐藏 控制栏。
 * tb_showbox()方法为显示和隐藏的效果具体实现
 * 注：目前该功能仅适用于表格操作！
 * 该方法在功能上没问题！但是chrome和火狐的显示效果会出问题！目前还没找到解决方案。
 * 可修改部分：
 * 表格ID，
 * cate变量赋值
 * 制作人：谭宁宁
 * 制作时间：2011-08-26
 */
function control_show()
{
//获取id为table_list的表格的所有元素
var table = document.getElementById("table_list");
var cate='';


for(var j=1;j<table.rows[0].cells.length;j++)
{
//此处为写入到表格里的td单元格里的内容，即控制栏
//此处可以修改为你想要样式
//注意input的id和onclick事件！默认checkbox为选中状态
cate+="<span><input id='cbox"+j+"' type='checkbox' checked='checked' οnclick='tb_showbox("+j+")' />"+table.rows[0].cells[j].innerHTML+"</span>";
}
//写入到网页里边,这里用了一个id为control的DIV！
document.getElementById('control').innerHTML="<span>显示/隐藏控制</span>"+cate;
}
/*
 * 控制表格列显示或隐藏的具体功能实现
 */
function tb_showbox(num)
{
var obj=document.getElementById('table_list');
var box=document.getElementById('cbox'+num);
//alert(num);
if(box.checked)
{
for(i=0;i<obj.rows.length;i++)
{
//alert('显示：'+obj.rows[i].cells[num]);
obj.rows[i].cells[num].style.display  =  "block";
}
}
else
{
for(i=0;i<obj.rows.length;i++)
{
//alert('隐藏：'+obj.rows[i].cells[num]);
obj.rows[i].cells[num].style.display  =  "none";
}
}
}
//该功能的相关资料
//--------------------------------------------------------------------
//获取表格当前的行数，使用 getrow(this)来调用
/*
function getrow(obj)
{
if(event.srcElement.tagName=="TD")
{
curRow=event.srcElement.parentElement;
alert("这是第"+(curRow.rowIndex+1)+"行");
}
}*/
//获取表格每行的元素
/*
var table = document.all("bg");
for(var i=0;i<table.rows.length;i++)
{
for(var j=0;j<table.rows[i].cells.length;j++)
{
alert(table.rows[i].cells[j].innerHTML);
}
}
//--------------------------------------------------------------------
*/
</script>


<style>body{ font-size:12px; font-family:"宋体"; margin:0px; padding:5px;}table{ width:960px;}table td.c_tit{ font-weight:bold;}.control{ width:958px; margin:0px; font-weight:bold; border:#000 1px solid; margin:2px;}.control span{ width:auto; line-height:180%;
 padding-left:10px; padding-right:10px; display:inline-block;}</style><body οnlοad="control_show()"><div class="control" id="control"></div><table border="1" cellspacing="2" id="table_list"><tr><td class="c_tit">第一行：标题行！</td><td>第一列</td><td>第二列</td><td>第三列</td><td>第四列</td><td>第五列</td></tr><tr><td
 class="c_tit">第二行</td><td>第一列</td><td>第二列</td><td>第三列</td><td>第四列</td><td>第五列</td></tr><tr><td class="c_tit">第三行</td><td>第一列</td><td>第二列</td><td>第三列</td><td>第四列</td><td>第五列</td></tr></table></body>

cntnn11

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
JS控制表格的列显示和隐藏

JS控制表格的列显示和隐藏/* * 控制表格的列显示和隐藏 * 使用方法：在网页读取时调用control_show()方法即可。 * 说明： * table_cell_dis()方法为获取显示/隐藏控制栏。 * tb_showbox()方法为显示和隐藏的效果具体实现 * 注：目前该功能仅适用于表格操作！ * 该方法在功能上没问题！但是chrome和火狐的显示效果会出问题！目
复制链接

扫一扫