javascript 表格左右收缩_javascript技巧

<title> 左右收缩表格 </title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <script language="JavaScript" type="text/javascript"> 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> <table> <tr> <td><img src="left.jpeg" onclick="tableLeftRetract();" alt="javascript 表格左右收缩_javascript技巧" ></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="right.jpeg" onclick="tableRightRetract();" alt="javascript 表格左右收缩_javascript技巧" ></td> </tr> </table> <script>tableOnLoad();</script>