本文實例講述了原生JS和JQuery動態添加、刪除表格行的方法。分享給大家供大家參考。具體分析如下：
下面HTML代碼作用：提交一個表單，將復選框的值提交(復選框的值等於後面的文本框，復選框和文本框處在同一行，可以動態添加和刪除)。
原生態JS版：
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 <!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="[email protected]"> </td> <td>[email protected]</td> </tr> <tr> <td colspan="2"> <input type="submit" value="提交" name="B1"> </td> </tr> </table> </form> </body> </html>JQuery版：
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 <!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="[email protected]"> </td> <td>[email protected]</td> </tr> <tr id="topRow"> <td colspan="2"> <input type="submit" value="提交" name="B1"> </td> </tr> </table> </form> </body> </html>希望本文所述對大家的javascript程序設計有所幫助。