`

javascript实现动态添加删除表格行

阅读更多
<script    language="javascript">  
   function    get_Element(the_ele,the_tag){  
   the_tag    =    the_tag.toLowerCase();  
   if(the_ele.tagName.toLowerCase()==the_tag)  
   return    the_ele;  
   while(the_ele=the_ele.offsetParent){  
   if(the_ele.tagName.toLowerCase()==the_tag)  
   return    the_ele;  
   }  
   return(null);  
   }  
   
   function    add_Row(the_table)    {  
   var    the_row,the_cell;  
   var    cur_rows=the_table.rows.length;  
   the_row=cur_rows==null?-1:(cur_rows);  
   var    i=the_row-1;    
   var    newrow=the_table.insertRow(i);//得到插入位置 
  
   the_cell=newrow.insertCell(0);  
   the_cell.innerHTML="<center    >"+i;  
   the_cell=newrow.insertCell(1);  
   the_cell.innerHTML="<center    ><input    name=A"+i+"    type=text    size=30>";    
   the_cell=newrow.insertCell(2);  
   the_cell.innerHTML="<center    ><INPUT    type=button    value=删除      onclick=del_row(myTable)>";  
   //alert(the_table.rows.length);
   document.getElementById("cname").value=myTable.rows.length;
     }  
   
   function    del_row(the_table){  
     var    the_cell;  
   the_cell=get_Element(event.srcElement,"td");  
   var    index=the_cell.parentElement.rowIndex;  
   if(the_cell==null)    return;  
   if(the_table.rows.length==1)    return;  
   the_table.deleteRow(index);  
   
   var    cell1='';  
   var    cell2='';  
   document.getElementById("cname").value=document.getElementById("cname").value-1;
   for(var    i=1;i<document.getElementById('myTable').rows.length-2;i++)  
   {  
     try  
        {  
           cell1=document.getElementById('myTable').rows[i].cells[0];        
           cell2=document.getElementById('myTable').rows[i+1].cells[0];      
           cell22=document.getElementById('myTable').rows[i+1].cells[1];                                           
                if(parseInt(cell2.innerText)!=(parseInt(cell1.innerText)+1))  
                {  
                              s=cell1.innerText.replace("","");                              
                             cell2.innerText=(parseInt(s-0)+1);  
                             cell2.style.textAlign='center';
                             cell22.innerHTML="<center    ><input    name=A"+(i+1)+"    type=text    size=30>";
                           //alert(cell22.innerHTML);                         
                         
                 }  
         }  
      catch(e)  
      {  
          alert(e.discription);  
      }  
   
   }  
   } 
   </script>

<form name="form1" method="post" >
   <table    width="60%"    border="0" align="center"    cellpadding="2"    cellspacing="1" bgcolor="#BBB3AA"      id="myTable"    >
     <tr    class="TdContent">
       <td bgcolor="#FFFFFF"    ><div    align="center">收件人</div></td>
       <td bgcolor="#FFFFFF"    ><div    align="center">接收人
             <input type="hidden" name="cname" id="cname">
       </div></td>
       <td bgcolor="#FFFFFF"    ><div    align="center">操作</div></td>
     </tr>
     <tr    class="TdContent">
       <td bgcolor="#FFFFFF"><div    align="center">1</div></td>
       <td align="center" bgcolor="#FFFFFF"><input    name="A1"    type="text" id="A1"    size="30"    >
       </td>
       <td bgcolor="#FFFFFF"><div    align="center">
           <input name="button"      type="button"        class="ButtonStyle"    onClick="add_Row(myTable)"    value="添加">
       </div></td>
     </tr>
     <tr    class="TdContent">
       <td    colspan="3"    align="center" bgcolor="#FFFFFF">&nbsp;</td>
     </tr>
   </table>
</form>
分享到:
评论
发表评论

文章已被作者锁定,不允许评论。

相关推荐

Global site tag (gtag.js) - Google Analytics