项目订单表单中htmldom技术应用

 一、         本文设计目标

一个项目订单设计中，需要处理主子表，或主表、子表1、子表2、子表3的应用情况，这里例举列说明，如何时在一个表格中动态增加一行数据，即一条记录，也可以动态删除一行数据，即删除一条记录，多个子表时，也同样操作。

这里的核心设计技术，就是用采用htmldom原生的javascript技术来实现。处理效果如下。

事实上，jquery核心知识体系的50%的内容也是如何操作htmldom技术

二、   编程要点如下

1、         表格设计如下

                <table border="1" id="mytb">

                       <tr align="center">

                              <td align="right" width="100">&nbsp; 

                              </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 刘明