<!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>
JS控制表格的列显示和隐藏
最新推荐文章于 2024-05-16 21:42:12 发布