动态插入table

fochail 2006-05-23 01:33:49

新手问题:
如何在页面上动态添加N个table A,而每个table A 里,还可以动态添加N个table B,table C,而table B里又可以动态添加N个table D.....,

总的意思就是table 嵌套内容不同的table.
这个问题是有实际意义的.^_^
谢谢!!!

...全文

204 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

fochail 2006-05-25

打赏
举报

谢谢hbhbhbhbhb1021(天外水火(我要多努力))

虽然现在问题没有解决,但你的热心,我由衷地表示感谢...........

现在这个问题不是很急迫了,但我暂时不结贴,看看能不能实现这样的效果.........

请各位高人继续指点,谢谢了

hbhbhbhbhb1021 2006-05-24

打赏
举报

re
谢谢你了
你给的不是我想要的JS,可能是我没把问题说清楚吧

问题是这样的:一个页面上有三个主要信息:一个学生基本信息(表格),一个学生家庭成员信息(表格),一个是成绩信息(表格);在家庭成员表格内,可以添加任意个家庭成员信息(表格);同理,成绩信息表里也可以添加任意个科目信息(表格);
这样的JS怎样写呢?谢谢了
(注:添加与删除都有)

----------------------------------------------------
还不是吗？
那这个呢？参考下，可以实现的。
<form name="form1" method="post" action="">
<input type="button" name="Submit" value="-" onclick="deleteRow()">
<input name="num" type="text" value="2" size="4" maxlength="4">
<input type="button" name="Submit2" value="+" onclick="insertRow()">
<br>
<table id="table1" width="500" border="1" cellspacing="0" cellpadding="0">
<tr>
<td width="87">学生编号</td>
<td width="277">学生姓名</td>
<td width="136">学生年龄</td>
</tr>
<tr>
<td>001</td>
<td>张三</td>
<td>20</td>
</tr>
</table>
</form>
<script language=javascript>
function deleteRow()
{
var obj=document.getElementById("table1")
var rowIndex=obj.childNodes[0].childNodes.length;
if(rowIndex>1)
{
document.getElementById("num").value=document.getElementById("num").value-parseInt(1)
obj.deleteRow(rowIndex-parseInt(1));
}
}
function insertRow()
{
var obj=document.getElementById("table1")
var rowIndex=obj.childNodes[0].childNodes.length;
var objTR=obj.insertRow(rowIndex);
var objTD1=objTR.insertCell();
var objTD2=objTR.insertCell();
var objTD3=objTR.insertCell();
rowIndex2=parseInt(rowIndex)+parseInt(1)
objTD1.innerHTML=obj.childNodes[0].childNodes[rowIndex-1].childNodes[0].innerHTML
objTD2.innerHTML=obj.childNodes[0].childNodes[rowIndex-1].childNodes[1].innerHTML
objTD3.innerHTML=obj.childNodes[0].childNodes[rowIndex-1].childNodes[2].innerHTML
document.getElementById("num").value=parseInt(document.getElementById("num").value)+parseInt(1)
}
</script>

hbhbhbhbhb1021 2006-05-23

打赏
举报

按照你的要求加了个删除表的功能
<body>
<input name=button1 type="button" value="增加表" onclick=addTable(document.body)>
<script language=javascript>
function addTable(obj)
{
var objtable=document.createElement("table")
objtable.border="1"
var objtbody=document.createElement("tbody")
objtable.appendChild(objtbody)
for(var i=0;i<3;i++)
{
objTr=document.createElement("tr")
objtbody.appendChild(objTr)
for(var j=0;j<3;j++)
{
objTd=document.createElement("td")
objTd.appendChild(document.createElement("<input name=button1 type=button value='增加表' onclick='addTable(this.parentNode)'>"))
objTd.appendChild(document.createElement("<input name=button2 type=button value='删除表' onclick='deleteTable(this.parentNode.parentNode.parentNode.parentNode)'>"))
objTr.appendChild(objTd)
}
}
obj.appendChild(objtable);
}
function deleteTable(obj)
{
obj.removeNode(true)
}
</script>

hbhbhbhbhb1021 2006-05-23

打赏
举报

<body>
<input name=button1 type="button" value="增加表" onclick=addTable(document.body)>
<script language=javascript>
function addTable(obj)
{
var objtable=document.createElement("table")
objtable.border="1"
var objtbody=document.createElement("tbody")
objtable.appendChild(objtbody)
for(var i=0;i<3;i++)
{
objTr=document.createElement("tr")
objtbody.appendChild(objTr)
for(var j=0;j<3;j++)
{
objTd=document.createElement("td")
objTd.appendChild(document.createElement("<input name=button1 type=button value='增加表' onclick='addTable(this.parentNode)'>"))
objTr.appendChild(objTd)
}
}
obj.appendChild(objtable);
}
</script>