js向table表格中添加tr行代码（分页有待改善）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
</title>
<script>
/*
1、分页：满足5行就自动翻到下一页，并且在下一页显示上一页，点击上一页后跳到上一页，并且在上一页表格下面显示下一页的连接，也显示一共有多少页，显示每一页的页数
*/
var num=0;
var td="";
var text="";
var tr="";
function addNode(){
num++;
var table=document.getElementById("table");
tr=document.createElement("tr");
tr.id=num;
tr.setAttribute("align","center");
/*var name1=document.getElementById("name");
var name2=document.getElementById("age");
var name3=document.getElementById("sex");
var name4=document.getElementById("phone");
var name5=document.getElementById("address");*/
var name=document.getElementsByName("name");
//alert(name[2].value);
for(var i=0;i<=name.length-1;i++){
//alert(name[i].value);
var text=document.createTextNode(name[i].value);
td=document.createElement("td");
td.appendChild(text);
tr.appendChild(td);
}
td=document.createElement("td");
tr.appendChild(td);
tr.childNodes[5].innerHTML="<a href='xiugai.html'>修改</a>";
//alert(tr.childNodes.length);
table.appendChild(tr);
if(table.childNodes.length>=6){
//alert("开始分页");
var div1=document.createElement("div");
var tr=document.createElement("tr");
var a=document.createElement("a");
a.href="#";
var td1=document.createElement("td");
//var td2=document.createElement("td");
//var td3=document.createElement("td");
//var td4=document.createElement("td");
var text1=document.createTextNode("下一页");
//var text2=document.createTextNode("bbbbbb");
a.appendChild(text1);
//a.appendChild(text2);
td1.appendChild(a);
//td2.appendChild(a);
tr.appendChild(td1);
//tr.appendChild(td2);
//tr.appendChild(td2);
div1.appendChild(tr);
//div1.appendChild(tr);
document.body.appendChild(div1);
}
var len=table.childNodes.length;
//alert(Math.round(len/5));
}
/*function bian(){
var table=document.getElementById("table").childNodes;
//alert(table.length);
for(var i=0;i<table.length-1;i+=2){
table[i].style.background="red";
}
}*/
//bian();
function fenye(){
var table=document.getElementById("table").childNodes;
}
function ceshi(){
var num1=table.childNodes.length+1;
var num2=Math.round(num1/5);
//alert("一共有"+num2+"页");
for(var i=1;i<=5;i++){
table.childNodes[i].style.display="none";
}
//var td=document.getElmentsTagName("td");
//table.style.display="none";
}
function ceshi1(){
for(var i=1;i<=5;i++){
table.childNodes[i].style.display="block";
}
}
function ceshi2(){
alert(document.getElementById("table").firstChild.firstChild.firstChild.id);
//alert(document.getElementById("table").firstChild.nodeName);
for(var i=1;i<=5;i++){
table.childNodes[i].style.display="none";
}
for(var i=6;i<=10;i++){
table.childNodes[i].style.display="block";
}
for(var i=11;i<=15;i++){
table.childNodes[i].style.display="none";
}
}
function ceshi3(){
for(var i=1;i<=5;i++){
table.childNodes[i].style.display="block";
}
for(var i=6;i<=10;i++){
table.childNodes[i].style.display="none";
}
for(var i=11;i<=15;i++){
table.childNodes[i].style.display="none";
}
}
</script>
</head>
<body>
<form>
姓名：<input type="text" id="name" name="name"/><p>
性别：<input type="text" id="sex" name="name"/><p>
年龄：<input type="text" id="age" name="name"/><p>
电话：<input type="text" id="phone" name="name"/><p>
地址：<input type="text" id="address" name="name"/><p>
<input type="button" value="添加" onclick="addNode()"/>
</form>
<table border="1" width="773" height="33" id="table"><tr style="background-color:#3399CC;">
<th width="137" height="27">姓名</th>
<th width="90">性别</th>
<th width="130">年龄</th>
<th width="227">电话</th>
<th width="155">地址</th>
<th width="155">操作</th>
</tr>
</table>
<input type="button" value="隐藏" onclick="ceshi()"/>
<input type="button" value="显示" onclick="ceshi1()"/>
<input type="button" value="下一页" onclick="ceshi2()"/>
<input type="button" value="上一页" onclick="ceshi3()"/>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
</title>
<script>
/*
1、分页：满足5行就自动翻到下一页，并且在下一页显示上一页，点击上一页后跳到上一页，并且在上一页表格下面显示下一页的连接，也显示一共有多少页，显示每一页的页数
*/
var num=0;
var td="";
var text="";
var tr="";
function addNode(){
num++;
var table=document.getElementById("table");
tr=document.createElement("tr");
tr.id=num;
tr.setAttribute("align","center");
/*var name1=document.getElementById("name");
var name2=document.getElementById("age");
var name3=document.getElementById("sex");
var name4=document.getElementById("phone");
var name5=document.getElementById("address");*/
var name=document.getElementsByName("name");
//alert(name[2].value);
for(var i=0;i<=name.length-1;i++){
//alert(name[i].value);
var text=document.createTextNode(name[i].value);
td=document.createElement("td");
td.appendChild(text);
tr.appendChild(td);
}
td=document.createElement("td");
tr.appendChild(td);
tr.childNodes[5].innerHTML="<a href='xiugai.html'>修改</a>";
//alert(tr.childNodes.length);
table.appendChild(tr);
if(table.childNodes.length>=6){
//alert("开始分页");
var div1=document.createElement("div");
var tr=document.createElement("tr");
var a=document.createElement("a");
a.href="#";
var td1=document.createElement("td");
//var td2=document.createElement("td");
//var td3=document.createElement("td");
//var td4=document.createElement("td");
var text1=document.createTextNode("下一页");
//var text2=document.createTextNode("bbbbbb");
a.appendChild(text1);
//a.appendChild(text2);
td1.appendChild(a);
//td2.appendChild(a);
tr.appendChild(td1);
//tr.appendChild(td2);
//tr.appendChild(td2);
div1.appendChild(tr);
//div1.appendChild(tr);
document.body.appendChild(div1);
}
var len=table.childNodes.length;
//alert(Math.round(len/5));
}
/*function bian(){
var table=document.getElementById("table").childNodes;
//alert(table.length);
for(var i=0;i<table.length-1;i+=2){
table[i].style.background="red";
}
}*/
//bian();
function fenye(){
var table=document.getElementById("table").childNodes;
}
function ceshi(){
var num1=table.childNodes.length+1;
var num2=Math.round(num1/5);
//alert("一共有"+num2+"页");
for(var i=1;i<=5;i++){
table.childNodes[i].style.display="none";
}
//var td=document.getElmentsTagName("td");
//table.style.display="none";
}
function ceshi1(){
for(var i=1;i<=5;i++){
table.childNodes[i].style.display="block";
}
}
function ceshi2(){
alert(document.getElementById("table").firstChild.firstChild.firstChild.id);
//alert(document.getElementById("table").firstChild.nodeName);
for(var i=1;i<=5;i++){
table.childNodes[i].style.display="none";
}
for(var i=6;i<=10;i++){
table.childNodes[i].style.display="block";
}
for(var i=11;i<=15;i++){
table.childNodes[i].style.display="none";
}
}
function ceshi3(){
for(var i=1;i<=5;i++){
table.childNodes[i].style.display="block";
}
for(var i=6;i<=10;i++){
table.childNodes[i].style.display="none";
}
for(var i=11;i<=15;i++){
table.childNodes[i].style.display="none";
}
}
</script>
</head>
<body>
<form>
姓名：<input type="text" id="name" name="name"/><p>
性别：<input type="text" id="sex" name="name"/><p>
年龄：<input type="text" id="age" name="name"/><p>
电话：<input type="text" id="phone" name="name"/><p>
地址：<input type="text" id="address" name="name"/><p>
<input type="button" value="添加" onclick="addNode()"/>
</form>
<table border="1" width="773" height="33" id="table"><tr style="background-color:#3399CC;">
<th width="137" height="27">姓名</th>
<th width="90">性别</th>
<th width="130">年龄</th>
<th width="227">电话</th>
<th width="155">地址</th>
<th width="155">操作</th>
</tr>
</table>
<input type="button" value="隐藏" onclick="ceshi()"/>
<input type="button" value="显示" onclick="ceshi1()"/>
<input type="button" value="下一页" onclick="ceshi2()"/>
<input type="button" value="上一页" onclick="ceshi3()"/>
</body>
</html>
