一、 本文设计目标
一个项目订单设计中，需要处理主子表，或主表、子表1、子表2、子表3的应用情况，这里例举列说明，如何时在一个表格中动态增加一行数据，即一条记录，也可以动态删除一行数据，即删除一条记录，多个子表时，也同样操作。
这里的核心设计技术，就是用采用htmldom原生的javascript技术来实现。处理效果如下。
事实上，jquery核心知识体系的50%的内容也是如何操作htmldom技术
二、 编程要点如下
1、 表格设计如下
|
<table border="1" id="mytb"> <tr align="center"> <td align="right" width="100"> </td> <td width="100"> 学号 </td> <td width="100"> 课程号 </td> <td width="100"> 成绩 </td> </tr> <tr> <td> <button type='button' onclick="delRow(this);">删除</button> </td> <td> <input type="text" name="studId"> </td> <td> <input type="text" name="courseId"> </td> <td> <input type="text" name="score"> </td> </tr> </table> <button type="button" onclick="insertRow();">增加一条记录</button> |
2、 动态新增一行数据，即动态新增一条记录
<script>
function insertRow(){
vartbObj=document.getElementById("mytb");
var row=""+
"<td><buttontype='button' onclick=\"delRow(this)\">删除</button></td>"+
"<td><inputname='studId'></td>"+
"<td><inputname='courseId'></td>"+
"<td><inputname='score'></td>"+
"";
var tr=document.createElement("tr");
tr.innerHTML=row;
tbObj.appendChild(tr);
}
</script>
3、 动态删除一行数据，即动态删除一条记录
<script>
function delRow(obj){
var trObj=obj.parentElement.parentElement;
var tbObj=trObj.parentElement;
tbObj.removeChild(trObj);
}
</script>
created by 刘明