做了一個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!