在线等待高人解决!如何动态实现多个表格的嵌套?

acheng 2003-10-20 09:53:57
效果图:

http://www.lemans.com.cn/3.jpg

要求实现:

1、javascript 实现

2、教育机构可以是多个,教育机构可以删除,一个教育机构对多个课程/专业,课程/专业可以删除

3、每次添加一个教育机构或课程专业时,文本框<input type="text" name="Point"> 中 name 值要规律变化区别,方便读取。

想了很久,各位专家帮帮我!

小弟感激不尽
...全文
45 3 打赏 收藏 转发到动态 举报
写回复
用AI写文章
3 条回复
切换为时间正序
请发表友善的回复…
发表回复
GageCSDN 2003-10-21
  • 打赏
  • 举报
回复
建议用XML+JavaScript。
GageCSDN 2003-10-21
  • 打赏
  • 举报
回复
然后提交XML文档到服务端,读取XML内容就可以了,关于XML的操作就自已找资料吧。
GageCSDN 2003-10-21
  • 打赏
  • 举报
回复
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<xml id="MyData">
<MyOrgData>
<Org>
<OrgName>机构一</OrgName>
<OrgAddress>机构一地址</OrgAddress>
<Class>
<Name>机构一课程(1)</Name>
<DateStart>2000-1-1</DateStart>
<DateEnd>2000-12-31</DateEnd>
<Description>机构一课程(1)情况</Description>
</Class>
<Class>
<Name>机构一课程(2)</Name>
<DateStart>2001-1-1</DateStart>
<DateEnd>2001-12-31</DateEnd>
<Description>机构一课程(2)情况</Description>
</Class>
<Class>
<Name>机构一课程(3)</Name>
<DateStart>2004-1-1</DateStart>
<DateEnd>2004-12-31</DateEnd>
<Description>机构一课程(3)情况</Description>
</Class>
</Org>
</MyOrgData>
</xml>
<xml id="xmlOrg">
<Org>
<OrgName></OrgName>
<OrgAddress></OrgAddress>
</Org>
</xml>
<xml id="xmlClass">
<Class>
<Name></Name>
<DateStart></DateStart>
<DateEnd></DateEnd>
<Description></Description>
</Class>
</xml>
<style>
<!--
tbody { background-color: #EEEEEE; border-style: outset; border-width: 0 }
input { font-size: 12px; border: 1 solid #6699FF }
body { font-size: 12px }
td { font-size: 12px }
textarea { border: 1 solid #6699FF }
-->
</style>
<script language="JavaScript">
function window_load()
{
delOrg(document.all.IndexObj1[0]);
}
function addOrg()
{
var objAdd = xmlOrg.XMLDocument.documentElement.cloneNode(true);
MyData.XMLDocument.documentElement.appendChild(objAdd);
}

function delOrg(index)
{
if(window.event.type == "click")
{
if(confirm("这个操作将无法恢复,确认要删除这个教育机构吗?"))
MyData.XMLDocument.documentElement.removeChild(MyData.XMLDocument.documentElement.childNodes[index]);
}
else
MyData.XMLDocument.documentElement.removeChild(MyData.XMLDocument.documentElement.childNodes[index]);
}

function addClass(index)
{
var objAdd = xmlClass.XMLDocument.documentElement.cloneNode(true);
MyData.XMLDocument.documentElement.childNodes[index].appendChild(objAdd);
}

function delClass(OrgIndex,ClassIndex)
{
if(confirm("这个操作将无法恢复,确认要删除这个课程/专业吗?"))
{
var xmlOrg = MyData.XMLDocument.documentElement.childNodes[OrgIndex];
xmlOrg.removeChild(xmlOrg.childNodes[ClassIndex + 2]);
}
}
</script>
</HEAD>

<BODY onload="//window_load();">
<table border="0" width="760" datasrc="#MyData" cellspacing="1" bgcolor="#6699FF" cellpadding="0">
<tr><td style="background-color: #6699FF" colspan="3">  <span datafld="OrgName"></span></td></tr>
<tr>
<td width="114" align="right">教育机构:</td>
<td width="538"><input type="text" name="OrgName" datafld="OrgName" size="50"></td>
<td width="98"><input type="button" value="删除教育机构" onclick="delOrg(((this.parentElement.parentElement.rowIndex+4)/5 - 1));" style="border: 1 solid blue"></td>
</tr>
<tr>
<td width="114" align="right">地址:</td>
<td width="640" colspan="2"><input type="text" name="OrgAddress" datafld="OrgAddress" size="50"></td>
</tr>
<tr>
<td valign="middle" align="center">课程/专业</td>
<td width="80%" colspan="2" align="right">
<table border="0" cellspacing="1" cellpadding="0" bgcolor="#EEEEEE" width="100%" datasrc="#MyData" datafld="Class">
<tr><td align="right">
<table border="0" cellspacing="1" cellpadding="0" width="80%">
<tr>
<td width="140" align="right">课程/专业:</td>
<td width="390"><input type="text" datafld="Name"></td>
<td width="212" align="right"><input type="button" value="删除课程/专业" onclick="delClass((this.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.rowIndex + 2)/5 - 1,this.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.rowIndex);" style="border: 1 solid blue"></td>
</tr>
<tr>
<td width="140" align="right">受教育时间:</td>
<td width="595" colspan="2"><input type="text" datafld="DateStart"> - <input type="text" datafld="DateEnd"></td>
</tr>
<tr>
<td width="140" align="right">获奖情况:</td>
<td width="595" colspan="2"><textarea name="Description" datafld="Description" rows="2" cols="20" style="width:100%"></textarea></td>
</tr>
<tr><td style="height: 1px; background-color: #000000" colspan="3"></td></tr>
</table>
</td></tr>
</table>
</td>
</tr>
<tr><td align="left" colspan="3"><input type="button" value="添加课程/专业" onclick="addClass(((this.parentElement.parentElement.rowIndex+1)/5 - 1));" style="border: 1 solid blue"></td></tr>
</table>
<hr noshade size="1" color="#6699FF" width="760" align="left">
<input type="button" value="添加教育机构" onclick="addOrg();" style="border: 1 solid blue">
<input type="button" value="查看XML" onclick="alert(MyData.XMLDocument.xml);" style="border: 1 solid blue">
</BODY>
</HTML>

87,901

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧