动态添加和删除table的一行

<div id="fj_update_add">
                <table border="0" cellspacing="0" cellpadding="0"style="border:0;" width="68%" align="center">  
            <tr valign="top">  
            <th>  
            <input type="button" οnclick="insertRow(table1);" value="添加附件" style="width: 80px;height: 30px;font-size: 12; font-weight: bold;"/>
            </th>  
            </tr>  
            </table>  
            <br/>  
            <table border="0" cellspacing="0" cellpadding="0" width="68%" align="center" id="table1">  
                <tr id="insertedRow" style="display:none;" mce_style="display:none;"> <!--隐藏这行做为模板--> 
                    <td>附件：</td>
                    <td><input name="file" type="file" class="" size="130" style="width: 495px;"/></td> 
                    <td><input type="button" οnclick="deleteRow(table1,this.parentElement.parentElement.rowIndex);" value="删除附件" style="width: 80px;height: 30px;font-size: 12;"/></td> 
                </tr> 
                <tr align="left" id="Tr1"> 
                    <td>附件：</td>
                    <td><input name="file" type="file" class="" size="130" style="width: 495px;"/></td>  
                    <td><input type="button" οnclick="deleteRow(table1,this.parentElement.parentElement.rowIndex);" value="删除附件" style="width: 80px;height: 30px;font-size: 12;"/></td> 
                </tr>    
            </table>  
           <!-- <p style="width: 370px;" id="upload_1">
            <label style="width: 50px;">附件：</label>
            <input name="file" type="file" class="" size="30" />
            <input type="button" οnclick="deleteRows(1);" value="删除"/>
            <a class="btnDel " href="javascript:void(0)">删除</a>
           </p>
           <p style="width: 370px;" id="upload_2">
            <label style="width: 50px;">附件：</label>
            <input name="file" type="file" class="" size="30" />
            <input type="button" οnclick="deleteRows(2);" value="删除"/>
           </p>
           <input type="button" οnclick="addRow();" value="添加附件" style="width: 100px;height: 38px;font-size: 14; font-weight: bold;"/>
           -->
           </div>

<script type="text/javascript">

var newRowIndex=2; //被插入的行索引   全局变量 
 //插入一行 
 function insertRow(tableID) 
 {  
   var table = document.getElementById(tableID); 
   var Rows=tableID.rows;//类似数组的Rows 
   var rousnum = tableID.rows.length;//table 表中现有tr的行行数
   if (newRowIndex>rousnum) {
    newRowIndex=rousnum;//将table中的实际行数赋值给全局变量 
   }
  
   var newRow=tableID.insertRow(newRowIndex);//插入新的一行  /*table.rows.length*/
   for (i=0;i<3;i++)//填入每列数据  
   {  
      var newCell=Rows[newRow.rowIndex].insertCell();    /*Cells.length*/
      newCell.align="left";  
      newCell.innerHTML=Rows[newRowIndex-1].cells[i].innerHTML; 
   }
   newRowIndex++; 
 }
  
 //删除一行 
 function deleteRow (tableID, rowIndex) 
 { 
   //var table = document.getElementById(tableID); 
   tableID.deleteRow(rowIndex); 
   if (newRowIndex==2) {//维护全局变量 
    newRowIndex;
   }else{
    newRowIndex--;
   }  
 }  

最后

以上就是无辜萝莉为你收集整理的动态添加和删除table的一行的全部内容，希望文章能够帮你解决动态添加和删除table的一行所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。