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()
{
//获取table
var 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);
//创建tbody
var tbody = document.createElement("tbody");
//装TD数组
var list = new Array();

for(var i =0;i<tab1_td_length;i++)
{
//装TD
list.push(tab1_tr.getElementsByTagName("td")[i]);
}

//根据页总数创建元素
for(var j =0;j<line;j++)
{
var tr = document.createElement("tr");
//开始值(当前页*行大小+1)-1
var 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装TD
tr.appendChild(clist[k]);
}

//装TR
tbody.appendChild(tr);
}

tab1.setAttribute("border","1");
tab1.setAttribute("bgcolor","#888888");
//table添加tbody
tab1.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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值