读书人

怎么隐藏表格的最后两列?多谢

发布时间: 2012-03-24 14:00:47 作者: rapoo

如何隐藏表格的最后两列?谢谢
如题

[解决办法]
html文件
<!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=gb2312 " />
<title> 无标题文档 </title>
</head>
<body>
<table width= "600 " border= "2 " cellpadding= "0 " cellspacing= "0 " id= 'showr '>
<tr>
<td> a </td>
<td> b </td>
<td> c </td>
<td> d </td>
<td> e </td>
<td> f </td>
<td> g </td>
<td> h </td>
</tr>
<tr>
<td> 1 </td>
<td> 2 </td>
<td> 3 </td>
<td> 4 </td>
<td> 5 </td>
<td> 6 </td>
<td> 7 </td>
<td> 8 </td>
</tr>
<tr>
<td>   </td>
<td>   </td>
<td>   </td>
<td>   </td>
<td>   </td>
<td>   </td>
<td>   </td>
<td>   </td>
</tr>
<tr>
<td>   </td>
<td>   </td>
<td>   </td>
<td>   </td>
<td>   </td>
<td>   </td>
<td>   </td>
<td>   </td>
</tr>
<tr>
<td>   </td>
<td>   </td>
<td>   </td>
<td>   </td>
<td>   </td>
<td>   </td>
<td>   </td>
<td>   </td>
</tr>
</table>
</body>
<SCRIPT LANGUAGE= "JavaScript ">
<!--
var usertable= "showr ";
//-->
</SCRIPT>
<SCRIPT LANGUAGE= "JavaScript " src = "movement_table.js "> </SCRIPT>
</html>

js文件movement_table.js

//javascript
//write by aya
//2007-04-20
//给所要实现动态的表格添加一个id值,并在HTML文件中建立var usertable= " "变量,把该table的id值,赋值给usertable变量
var oPopup = window.createPopup();
var flag=0 ;
var heighter=0;
var widther= 120;

mtable=document.getElementById(usertable);
mtable.rows[0].oncontextmenu = function (table){
right_click(mtable);
return false;
}

function right_click(submenu){
if(!flag)
{
analyse_tab(usertable);
flag=1;
}

var lefter = event.x-20;
var topper = event.y-20;


var menu= document.getElementById( 'menu ');

oPopup.document.body.innerHTML = menu.innerHTML;

oPopup.show(lefter,topper,widther,heighter,submenu);
}

function analyse_tab()
{
table=document.getElementById(usertable);
table_row=table.rows.length;
table_cell=table.rows[0].cells.length;


creat_menu(table,table_row,table_cell);
heighter=24*table_cell+4;
}


function creat_menu(table,row,cell)
{
c_div=document.createElement( " <div id= 'menu ' style= 'display:none '> </div> ");
document.body.appendChild(c_div);
menu_div=document.getElementById( 'menu ');
c_table=document.createElement( " <table width=120 id= 'menu_tab ' style= 'border=0 position:relative; top:0; left:0; background:#EFEBDE; border:1px outset #cccccc; border-top: 1px solid white; border-left:1px solid white;color:black; padding:0px; font-size:12px; cursor:hand '> </table> ");
menu_div.appendChild(c_table);
menu_table=document.getElementById( 'menu_tab ');
for(i=0;i <=cell-1;i++){
otr=document.createElement( " <tr height=20> </tr> ");
otd_check=document.createElement( " <td> </td> ");
ocheckbox=document.createElement( " <input type= 'checkbox ' onclick=parent.cell_state(this, "+i+ ") checked> ");
otd_text=document.createElement( " <td> </td> ");
otd_text.innerText =table.rows[0].cells[i].innerText;
otd_check.appendChild(ocheckbox);
otr.appendChild(otd_check);
otr.appendChild(otd_text);
menu_table.appendChild(otr);
}
}


function cell_state(check,cellId)
{
table=document.getElementById(usertable);
table_row=table.rows.length;
table_cell=table.rows[0].cells.length;

menu_tables=parent.document.getElementById( 'menu_tab ');
tcell=menu_tables.children[cellId].children[0];
tcell.children[0].removeNode(true);
if(!check.checked)
{
for(i=0;i <table_row;i++)
{
cell=table.rows[i].cells[cellId];
cell.style.display= 'none ';
}
oncheckbox=document.createElement( " <input type= 'checkbox ' onclick=parent.cell_state(this, "+cellId+ ")> ");
tcell.appendChild(oncheckbox);
}else
{
for(i=0;i <table_row;i++)
{
cell=table.rows[i].cells[cellId];
cell.style.display= 'block ';
}
oncheckbox=document.createElement( " <input type= 'checkbox ' onclick=parent.cell_state(this, "+cellId+ ") checked> ");
tcell.appendChild(oncheckbox);

}
}

在表格的第一行上点击右键,可以选择隐藏的列
[解决办法]
<!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=gb2312 " />
<title> 无标题文档 </title>
<style type= "text/css ">
#tr_hide{display:none}
</style>
</head>
<body>
<table width= "400 " border= "1 " align= "center " cellpadding= "0 " cellspacing= "0 ">
<tr>
<td>   </td>
<td>   </td>
<td>   </td>
<td>   </td>
</tr>
<tr>
<td>   </td>
<td>   </td>
<td>   </td>
<td>   </td>
</tr>
<tr id= "tr_hide ">
<td>   </td>
<td>   </td>


<td>   </td>
<td>   </td>
</tr>
<tr id= "tr_hide ">
<td>   </td>
<td>   </td>
<td>   </td>
<td>   </td>
</tr>
</table>
</body>
</html>

读书人网 >JavaScript

热点推荐