原生JS和JQuery动态添加、删除表格行的方法

本文主要是介绍原生JS和JQuery动态添加、删除表格行的方法，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

本文实例讲述了原生JS和JQuery动态添加、删除表格行的方法。分享给大家供大家参考。具体分析如下：

下面HTML代码作用：提交一个表单，将复选框的值提交（复选框的值等于后面的文本框，复选框和文本框处在同一行，可以动态添加和删除）。

原生态JS版：

  <!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Strict//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > 
 <html xmlns= "http://www.w3.org/1999/xhtml" > 
 <head> 
 <meta http-equiv= "Content-Type"  content= "text/html; charset=utf-8"  /> 
 <title>javascript添加行demo</title> 
   <script type= "text/javascript" >  
   /**验证表单复选框是否有选择*/ 
   function  isValidChkSelect(frm){  
    var  chk = frm.chked;  
    if (chk == undefined){  
    return ;  
    }  
    var  len = frm.chked.length;  
    if (chk.length == undefined){  
    // 只有一个checkbox  
    if  (chk.checked ==  true ) {  
     return  true ;  
    }  
    }  else  {  
    for ( var  i = 0; i < chk.length; i++) {  
     if  (chk[i].checked ==  true ) {  
     return  true ;  
     }  
    }  
    }  
    return  false ;  
   }  
   /**选择所有文本框*/ 
   function  selectAll(frm){  
    for  ( var  i = 0; i < frm.elements.length; i++){  
    var  e = frm.elements[i];  
    if  (e.name !=  'chkall'  && e.type ==  'checkbox' )  
     e.checked = frm.chkall.checked;  
    }  
   }  
   /**添加新行*/ 
   function  addNew(){  
    var  objMyTable = document.getElementById( "tbl" );  
    var  index = objMyTable.rows.length - 1;  
    var  nextRow = objMyTable.insertRow(index); // 插入新行  
    var  objCel_0 = nextRow.insertCell(0); // 添加单元格  
    objCel_0.innerHTML =  "<input type='checkbox' name='chked' value='' />" ;  
    var  objCel_1 = nextRow.insertCell(1);  
    // nextRow.rowIndex -- 行索引  
    objCel_1.innerHTML =  "<input type='text' name='newRow" +nextRow.rowIndex+ "' /> <a href='#' onclick='delRow(this)'>删除</a>" ;  
   }  
   /**删除行对象*/ 
   function  delRow(obj){  
    //obj.parentNode.parentNode.removeNode(true); // Firefox不兼容  
    var  new_tr = obj.parentNode.parentNode;  
    var  tmp = new_tr.parentNode;  
    tmp.removeChild(new_tr);  // 删除子节点  
   }  
   /**将文本框值赋给同一行对应的复选框*/ 
   function  setValue(obj, obj_chk){  
    obj_chk.value = obj.value;  
   }  
   function  doSubmit(frm){  
    if (isValidChkSelect(frm) ==  false ){  
    alert( "选择不能少于一项" );  
    return  false ;  
    }  
    for ( var  i = 0; i < document.getElementsByTagName( "input" ).length; i++) {  
    var  obj = document.getElementsByTagName( "input" )[i];  
    if (obj.type ==  "text"  && obj.name.substring(0, 6) ==  "newRow" ){  
     var  obj_chk = obj.parentNode.parentNode.childNodes[0].childNodes[0]; // 复选框对象  
     if (valid(obj, obj_chk)){  
     setValue(obj, obj_chk); // 同一行的文本框值 赋值给 复选框  
     continue ;  
     }  else  {  
     return  false ;  
     }  
    }  
    }  
    return  true ;  
   }  
   function  valid(obj, obj_chk){  
    if (obj_chk.checked){  
    var  patrn = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;  
    if (obj.value ==  "" ){  
     alert( "添加的地址不能为空！" );  
     return  false ;  
    }  
    if (!patrn.test(obj.value)){  
     alert( "请输入正确的邮件地址！" );  
     return  false ;  
    }  
    }  
    return  true ;  
   }  
   </script>  
 </head>  
 <body>  
   <form method= "post"  action= ""  onsubmit= "return doSubmit(this)" >  
   <table id= "tbl"  border= "1"  cellpadding= "4"  style= "border-collapse: collapse"  width= "100%" >  
    <tr>  
    <td><input type= "checkbox"  name= 'chkall'  onclick= "selectAll(this.form)" />全部选择</td>  
    <td>  
     允许发送地址  
     <a href= "#"  onclick= "addNew()" >添加新地址</a>  
    </td>  
    </tr>  
    <tr>  
    <td>  
     <input type= "checkbox"  name= "chked"  value= "mailfrom@gmail.com" >  
    </td>  
    <td>mailfrom@gmail.com</td>  
    </tr>  
    <tr>  
    <td colspan= "2" >  
     <input type= "submit"  value= "提交"  name= "B1" >  
    </td>  
    </tr>  
   </table>  
   </form>  
 </body>  
 </html> 
 

JQuery版：

 ? 
 <!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Strict//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > 
 <html xmlns= "http://www.w3.org/1999/xhtml" > 
 <head> 
 <meta http-equiv= "Content-Type"  content= "text/html; charset=utf-8"  /> 
 <title>jQuery添加行demo</title> 
 <script type= "text/javascript"  src= "jquery-1.6.4.min.js" ></script>  
 <script type= "text/javascript" >  
   $( "document" ).ready( function (){  
    // 全部选择的点击事件  
    $( "input[name='chkall']" ).click( function (){  
    $( "input[name='chked']" ).attr( "checked" ,  this .checked);  
    });  
   });  
   var  row_cur_index = 0; // 插入行的当前索引  
   /**添加新行*/ 
   function  addNew(){  
    var  row_id =  "tr"  + row_cur_index; // 所插入行的id  
    var  row_obj =  "<tr id='" +row_id+ "'><td><input type='checkbox' class='ck_class' name='chked' value='' /></td><td><input type='text' name='newRow" +row_cur_index+ "' /> <a href='#' onclick='delRow(" +row_id+ ")'>删除</a></td></tr>" ;  
    $( "#topRow" ).before(row_obj);  // 插入行  
    row_cur_index = row_cur_index + 1;  
   }  
   /**将文本框值赋给同一行对应的复选框*/ 
   function  setValue(row_index, value){  
    var  row_id =  "#tr"  + row_index;  
    $(row_id).find( ":checked" ).val(value);  
   }  
   /**删除行对象*/ 
   function  delRow(row_id){  
    $(row_id).remove();  // 删除匹配row_id的元素  
   }  
   function  doSubmit(frm){  
    /**判断复选框是否有选*/ 
    if ($( "input[name='chked']:checked" ).size() == 0){  
    alert( "选择不能少于一项" );  
    return  false ;  
    }  
    try  {  
    $( "tr[id^='tr']" ).each( function (){  
     var  tmp_row_index =  this .id.substring(2);  // 当前行索引  
     if ($( "#tr" +tmp_row_index).find( ":checkbox" ).attr( "checked" )){  
     var  patrn = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;  
     var  input_value = $( "input[name='newRow" +tmp_row_index+ "']" ).val();  // 文本框值  
     setValue(tmp_row_index,  this .value);   
     if (input_value ==  "" )  throw  "Err1" ;  
     if  (!patrn.test(input_value))  throw  "Err2" ;  
     }  
    });  
    }  catch  (e) {  
     if (e ==  "Err1" )  
     alert( "添加的地址不能为空！" );  
    if (e ==  "Err2" )  
     alert( "请输入正确的邮件地址！" );   
     return  false ;  
    }  
    return  true ;  
   }  
   </script>  
 </head>  
 <body>  
   <form method= "post"  action= ""  onsubmit= "return doSubmit(this)" >  
   <table id= "tbl"  border= "1"  cellpadding= "4"  style= "border-collapse: collapse"  width= "100%" >  
    <tr>  
    <td><input type= "checkbox"  name= 'chkall'  />全部选择</td>  
    <td>  
     允许发送地址  
     <a href= "#"  onclick= "addNew()" >添加新地址</a>  
    </td>  
    </tr>  
    <tr>  
    <td>  
     <input type= "checkbox"  name= "chked"  value= "mailfrom@gmail.com" >  
    </td>  
    <td>mailfrom@gmail.com</td>  
    </tr>  
    <tr id= "topRow" >  
    <td colspan= "2" >  
     <input type= "submit"  value= "提交"  name= "B1" >  
    </td>  
    </tr>  
   </table>  
   </form>  
 </body>  
 </html> 