TR分段显示

最新推荐文章于 2020-11-21 03:55:39 发布

原创最新推荐文章于 2020-11-21 03:55:39 发布 · 223 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#音乐 #Google #J#

Javascript 专栏收录该内容

8 篇文章

订阅专栏


<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>