读书人

TR分段展示

发布时间: 2012-11-23 00:03:43 作者: rapoo

TR分段显示

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text ml; charset=utf-8" /><title>我的主页</title><script type="text/javascript">function load(){//获取tablevar tab1 = document.getElementById("tab1");//获取table的第一个tr元素var tab1_tr=document.getElementsByTagName("tr")[0];//获取第一个tr下的所有td长度var tab1_td_length=tab1_tr.getElementsByTagName("td").length;//设置行大小var lineCount=6;//判断是否超过行大小if(tab1_td_length>6){//计算总页数((记录数+行大小-1)/行大小)var line = Math.round((tab1_td_length+lineCount-1)/lineCount);//创建tbodyvar tbody = document.createElement("tbody");//装TD数组var list = new Array();for(var i =0;i<tab1_td_length;i++){//装TDlist.push(tab1_tr.getElementsByTagName("td")[i]);}//根据页总数创建元素for(var j =0;j<line;j++){var tr = document.createElement("tr");//开始值(当前页*行大小+1)-1var begin = (j*lineCount+1)-1;//结束值(当前页*行大小>记录总数?记录总数:当前页*行大小)var end = (j+1)*lineCount>tab1_td_length ? tab1_td_length : (j+1)*lineCount ;//截取TD数组var clist = list.slice(begin,end);for(var k =0;k<clist.length;k++){  //TR装TDtr.appendChild(clist[k]);}//装TRtbody.appendChild(tr);}tab1.setAttribute("border","1");tab1.setAttribute("bgcolor","#888888");//table添加tbodytab1.appendChild(tbody);}}</script></head><body onload="load()">              <table id="tab1" width="100%" border="0" cellspacing="0" cellpadding="0">                 <tr>                  <td><a href="http://www.taobao.com/"  target="_blank">淘宝网 </a></td>                  <td><a href="http://www.dangdang.com/"target="_blank">当当网</a></td>                  <td><a href="http://www.39.net"  target="_blank">39健康网</a></td>                  <td><a href="http://military.china.com/"  target="_blank">中华军事网</a></td>                  <td><a href="http://www.hao123.com"  target="_blank">hao123</a></td>                  <td><a href="http://www.aiting.com/"  target="_blank">爱听音乐</a></td>                                    <td><a href="http://www.taobao.com/"  target="_blank">淘宝网 </a></td>                  <td><a href="http://www.taobao.com/"  target="_blank">淘宝网 </a></td>                  <td><a href="http://www.taobao.com/"  target="_blank">淘宝网 </a></td>                  <td><a href="http://www.taobao.com/"  target="_blank">淘宝网 </a></td>                  <td><a href="http://www.taobao.com/"  target="_blank">淘宝网 </a></td>                                                   </tr>                          <tr>                  <td><a href="http://www.sina.com"  target="_blank">新 浪</a></td>                  <td><a href="http://military.china.com/"  target="_blank">中华军事网</a></td>                  <td><a href="http://www.163.com"  target="_blank">网 易</a></td>                  <td><a href="http://www.qq.com"  target="_blank">腾 讯</a></td>                  <td><a href="http://www.google.com.hk/"  target="_blank">Google</a></td>                  <td><a href="http://www.baidu.com/"  target="_blank">百 度</a></td>                </tr>             </table>                <br/></body>

读书人网 >Web前端

热点推荐