Table动态增加删除行

增加行的实现：使用一个隐藏的Table(本例中是id为sourceTable)来作为模版，取出sourceTable的第一行，使用clone的方式来将每一列的内容赋值给需要插入行的table中，该方法如下：

//使用clone方式来生成一行，targetTable是需要添加行的table的ID，sourceTable是clone对象

         //talbe的ID，即复制sourceTable的第一行插入到targetTable中，完成增加行的操作

         function insertRow(targetTable,sourceTable)

         {

           var oTBODY     = document.getElementById(targetTable).tBodies.item(0);

           var oTBODYData = document.getElementById(sourceTable).tBodies.item(0);

           var rowsCount = oTBODYData.rows.length;

           for(var i=0;i

             oTBODY.appendChild(oTBODYData.rows[i].cloneNode(true));

           }

         }
删除行的实现：在每一行的最末尾有一个删除按钮，点击删除按钮则删除当前按钮所在的行，所以首先要获取该删除按钮的index，取删除按钮index的方法如下，该方法中要求删除按钮必须name属性：

//  查询出将要删除的行所在的位置index

           function getElementOrder(field){

               var i = 0;

               var order = 0;

               var elements = document.getElementsByName(field.name);

               for(i=0;i

                   order++;

                   if(elements[i]==field){

                       break;

                   }

               }

               return order;

           }
以下是一个完整的例子，直接复制就可以使用了，如果用户的需求与例子有差别时，只需要将sourceTable即模版调整为用户的需求，并将targetTable的title做调整即可：

    

       

       "javascript">

          //使用clone方式来生成一行，targetTable是需要添加行的table的ID，sourceTable是clone对象

         //talbe的ID，即复制sourceTable的第一行插入到targetTable中，完成增加行的操作

         function insertRow(targetTable,sourceTable)

         {

           var oTBODY     = document.getElementById(targetTable).tBodies.item(0);

           var oTBODYData = document.getElementById(sourceTable).tBodies.item(0);

           var rowsCount = oTBODYData.rows.length;

           for(var i=0;i

             oTBODY.appendChild(oTBODYData.rows[i].cloneNode(true));

           }

         }

        

        function deleteRow(Field,targetTable){

              var findex = getElementOrder(Field)-1;//此处减1是因sourceTable中有一行是隐藏的

              document.getElementById(targetTable).deleteRow(findex);

         }

              

           //  查询出将要删除的行所在的位置index

           function getElementOrder(field){

               var i = 0;

               var order = 0;

               var elements = document.getElementsByName(field.name);

               for(i=0;i

                   order++;

                   if(elements[i]==field){

                       break;

                   }

               }

               return order;

           }

       

    

    

       "sourceTable" style="display:none;">

           

              "text" name="username">

              "password" name ="password">

              "text" name= "age">

              "button"  name = "deleteButton" value="删除" οnclick="deleteRow(this,'targetTable')">

           

       

       "targetTable">

           

              用户名

              密码

              年龄

               

           

            

               

                  "4" align="right">"button" value="增加行" οnclick="insertRow('targetTable','sourceTable');">