javascript表格左右收缩_javascript技巧

来源：动视网责编：小采时间：2020-11-27 20:43:27

javascript表格左右收缩_javascript技巧

javascript表格左右收缩_javascript技巧: 左右收缩表格 function tableOnLoad() { var tableObj=document.getElementById(testTable); var colNumber=tableObj.rows.item(0).cells.length; var colObjs=tableObj.getElementsByTa

推荐度：

点击下载本文 文档为doc格式

导读javascript表格左右收缩_javascript技巧: 左右收缩表格 function tableOnLoad() { var tableObj=document.getElementById(testTable); var colNumber=tableObj.rows.item(0).cells.length; var colObjs=tableObj.getElementsByTa

<HTML> 
<HEAD> 
<TITLE> 左右收缩表格 </TITLE> 
<meta http-equiv="content-type" content="text/html;charset=gb2312"> 
 
function tableOnLoad() 
{ 
var tableObj=document.getElementById("testTable"); 
var colNumber=tableObj.rows.item(0).cells.length; 
var colObjs=tableObj.getElementsByTagName("td"); 
if(colNumber>5) 
{ 
for(var i=5;i<colObjs.length;i++) 
{ 
colObjs(i).style.display="none"; 
} 
} 
} 
function tableLeftRetract() 
{ 
var tableObj=document.getElementById("testTable"); 
var colNumber=tableObj.rows.item(0).cells.length; 
var colObjs=tableObj.getElementsByTagName("td"); 
//minNumber of column of which display style is none 
var minNumber=0; 
for(var i=0;i<colNumber;i++) 
{ 
if(colObjs(i).style.display!="none") 
{ 
minNumber=i; 
break; 
} 
} 
if(minNumber<=colNumber-1-5 && colNumber>5){ 
for(var m=0;m<=minNumber;m++) 
{ 
colObjs(m).style.display="none"; 
} 
for(var n=minNumber+1;n<minNumber+1+5;n++) 
{ 
colObjs(n).style.display=""; 
} 
for(var j=colNumber-1;j>minNumber+5;j--) 
{ 
colObjs(j).style.display="none"; 
} 
} 
} 
function tableRightRetract() 
{ 
var tableObj=document.getElementById("testTable"); 
var colNumber=tableObj.rows.item(0).cells.length; 
var colObjs=tableObj.getElementsByTagName("td"); 
//minNumber of column of which display style is none 
var maxNumber=colNumber-1; 
for(var i=colNumber-1;i>=0;i--) 
{ 
if(colObjs(i).style.display!="none") 
{ 
maxNumber=i; 
break; 
} 
} 
if(maxNumber>=5 && colNumber>5){ 
for(var m=colNumber-1;m>=maxNumber;m--) 
{ 
colObjs(m).style.display="none"; 
} 
for(var n=maxNumber-1;n>maxNumber-1-5;n--) 
{ 
colObjs(n).style.display=""; 
} 
for(var j=maxNumber-1-5-1;j>=0;j--) 
{ 
colObjs(j).style.display="none"; 
} 
} 
} 
</ script> 
</head> 
<body> 
<table> 
<tr> 
<td><img src="https://www.gxlcms.com/Uploads/left.jpeg" onClick="tableLeftRetract();"/></td> 
<td> 
<table id="testTable"> 
<tr> 
<td>col1</td> 
<td>col2</td> 
<td>col3</td> 
<td>col4</td> 
<td>col5</td> 
<td>col6</td> 
<td>col7</td> 
<td>col8</td> 
<td>col9</td> 
<td>col10</td> 
</tr> 
</table> 
</td> 
<td><img src="https://www.gxlcms.com/Uploads/right.jpeg" onClick="tableRightRetract();"/></td> 
</tr> 
</table> 
tableOnLoad();</ script> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

javascript表格左右收缩_javascript技巧

推荐度：

点击下载本文 文档为doc格式

标签：表格 js javascript

热门焦点

javascript表格左右收缩_javascript技巧

javascript表格左右收缩_javascript技巧

javascript表格左右收缩_javascript技巧

最新推荐

猜你喜欢

热门推荐