Js实现动态添加删除行
做了一个Js实现Table动态添加一行的小例子。
实现功能：
1.可以根据自己的需求，动态的添加行。
2.点击<增加一行>按钮，添加了三行，如图二。
填充数据，如图三：
3.点击<保存>按钮，将Table中的数据保存在下面的新的Table中，如图四：
下面我们就来看一下具体用代码怎么来实现吧！
1）页面布局代码如下：
1 <form id="form1" runat="server"> 2 <div> 3 <table id="orderTable" border='1' cellpadding="1" cellspacing="0" style="border-collapse: collapse; border-color:#C0C0C0;" rules="none" width="80%" align="center"> 4 <thead> 5 <tr> 6 <th style="width: 20%;">申报部门</th> 7 <th style="width: 20%;">街镇</th> 8 <th style="width: 20%;">路段名称</th> 9 <th style="width: 30%;">起止路名</th> 10 <th>操作</th> 11 </tr> 12 </thead> 13 <tr id="row0"> 14 <td> 15 <select id="UrbanDepNo0" name="UrbanDepNo" style="width:90%"> 16 <option value="1">三林城管署</option> 17 <option value="2">港城城管署</option> 18 <option value="3">惠南城管署</option> 19 <option value="4">金桥城管署</option> 20 <option value="5">陆家嘴城管办</option> 21 <option value="6">川沙城管署</option> 22 </select> 23 </td> 24 <td> 25 <input type="text" id="LocNo0" name="LocNo" style="width:90%"/> 26 27 </td> 28 <td> 29 <input type="text" id="RoadSectionName0" name="RoadSectionName" style="width:90%"/> 30 </td> 31 <td> 32 <input type="text" id="StStartRoad0" name="StStartRoad" style="width:45%"/>-- 33 <input type="text" id="EndRoadName0" name="EndRoadName" style="width:45%"/> 34 </td> 35 <td> 36 <input type="button" name="delete" value="删 除" style="width:80px" onclick="deleteSelectedRow(0)" /> 37 38 </td> 39 </tr> 40 <tr> 41 <td align="center" colspan="5"> 42 <br /> 43 <input type="button" name="insert" value="增加一行" style="width:80px" onclick="insertNewRow()" />   44 <input type="button" value=" 保 存 " style="width:80px" onclick="GetValue()" /> 45 </td> 46 </tr> 47 </table> 48 </div> 49 <div style="MARGIN: 40px auto;"> 50 <table id="TableInfo" border='1' cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-color:#C0C0C0;" width="80%" align="center"> 51 <tr> 52 <td align="center"> 53 申报部门 54 </td> 55 <td align="center"> 56 街镇 57 </td> 58 <td align="center"> 59 路段名称 60 </td> 61 <td align="center"> 62 起止路名 63 </td> 64 <td align="center"> 65 操作 66 </td> 67 </tr> 68 </table> 69 </div> 70 </form>
2）JS实现<新增一行>功能，JS代码如下：
1 <script src="common/jquery-1.4.2.js" type="text/javascript"></script> 2 <script src="common/jquery-1.7.2.js" type="text/javascript"></script> 3 <script type="text/javascript" language='javascript'> 4 //声明全局变量 5 var formvalue = ""; 6 var flag = 1; 7 var index=1; 8 var firstCell = ""; 9 var secondCell = ""; 10 var thirdCell = ""; 11 var fourthCell = ""; 12 13 $(function() { 14 //初始化第一行 15 firstCell = $("#row0 td:eq(0)").html(); 16 secondCell = $("#row0 td:eq(1)").html(); 17 thirdCell = $("#row0 td:eq(2)").html(); 18 fourthCell = $("#row0 td:eq(3)").html(); 19 }); 20 21 //-----------------新增一行-----------start--------------- 22 function insertNewRow() { 23 //获取表格有多少行 24 var rowLength = $("#orderTable tr").length; 25 //这里的rowId就是row加上标志位的组合。是每新增一行的tr的id。 26 var rowId = "row" + flag; 27 28 //每次往下标为flag+1的下面添加tr,因为append是往标签内追加。所以用after 29 var insertStr = "<tr id=" + rowId + ">" 30 + "<td style='width: 20%'>" + firstCell + "</td>" 31 + "<td style='width: 20%'>" + secondCell + "</td>" 32 + "<td style='width: 20%'>" + thirdCell + "</td>" 33 + "<td style='width: 30%'>" + fourthCell + "</td>" 34 + "<td><input type='button' name='delete' value='删除' style='width:80px'
onclick='deleteSelectedRow(\"" + rowId + "\")' />"; 35 +"</tr>"; 36 //这里的行数减2，是因为要减去底部的一行和顶部的一行，剩下的为开始要插入行的索引 37 $("#orderTable tr:eq(" + (rowLength - 2) + ")").after(insertStr); //将新拼接的一行插入到当前行的下面 38 //为新添加的行里面的控件添加新的id属性。 39 $("#" + rowId + " td:eq(0)").children().eq(0).attr("id", "UrbanDepNo" + flag); 40 $("#" + rowId + " td:eq(1)").children().eq(0).attr("id", "LocNo" + flag); 41 $("#" + rowId + " td:eq(2)").children().eq(0).attr("id", "RoadSectionName" + flag); 42 $("#" + rowId + " td:eq(3)").children().eq(0).attr("id", "StStartRoad" + flag); 43 $("#" + rowId + " td:eq(3)").children().eq(1).attr("id", "EndRoad" + flag); 44 //每插入一行，flag自增一次 45 flag++; 46 }
如果新增行多了，我们想把多余的行删除，点击新增行的操作列的<删除>按钮，实现删除一行。JS代码实现如下：
//-----------------删除一行，根据行ID删除-start-------- function deleteSelectedRow(rowID) { if (confirm("确定删除该行吗？")) { $("#" + rowID).remove(); } }
2）将添加的Table中的数据保存到一个新的Table表中。
首先我们要先获取Table中的数据，JS代码如下：
//-----------------获取表单中的值----start-------------- function GetValue() { var value = ""; $("#orderTable tr").each(function(i) { if (i >= 1) { $(this).children().each(function(j) { if ($("#orderTable tr").eq(i).children().length - 1 != j) { value += $(this).children().eq(0).val() + "," //获取每个单元格里的第一个控件的值 if ($(this).children().length > 1) { value += $(this).children().eq(1).val() + "," //如果单元格里有两个控件，获取第二个控件的值 } } }); value = value.substr(0, value.length - 1) + "#"; //每个单元格的数据以“，”分割，每行数据以“#”号分割 } }); value = value.substr(0, value.length); ReceiveValue(value); // $("#formvalue").val(value); // $("formvalue").submit(); }
//-------------------接收表单中的值-----------------------------
function ReceiveValue(str) { var Str = str.split('#'); if (Str[0] != "") { for (var i = 0; i < Str.length - 1; i++) { var value = Str[i].split(','); var dept = value[0]; var street = value[1] var section = value[2]; var Broad = value[3]; var Eroad = value[4]; insertTable(dept, street, section, Broad, Eroad); $("input[type='text']").val(""); $("select[name='UrbanDepNo']").val("0"); } } }
//---------------将表单中的数据添加到新表中---------------------
function insertTable(dept, street, section, Broad, Eroad) { var department = ""; switch (dept) { case "1": department = "三林城管署"; break; case "2": department = "港城城管署"; break; case "3": department = "惠南城管署"; break; case "4": department = "金桥城管署"; break; case "5": department = "陆家嘴城管办"; break; case "6": department = "川沙城管署"; break; default: break; }
//将接收到数据添加到新表TableInfo中。
$('#TableInfo').append("<tr id=" + index + "><td align='center'>" + department + "</td>
<td align='center'>" + street + "</td><td align='center'>" + section + "</td>
<td align='center'>" + Broad + "-" + Eroad + "</td>
<td align='center'><a href='#' onclick='deltr(" + index + ")'>删 除</a></td></tr>"); index++; }
添加成功之后。我们也可以对新的列表中的数据进行删除操作。JS代码如下：
//----------新表中的删除方法----------- function deltr(index) { if (confirm("确定删除吗?")) { $("tr[id='" + index + "']").remove(); } }
OVER!
