說明：
1、把數據庫中的數據查詢出來，填充到前台的table中，注意 從數據查詢出來的 屬性IsNew="0"（table 行tr的屬性）
2、單擊“添加”按鈕 新添加行追加到table的尾部 屬性IsNew="1"（table 行tr的屬性）
3、也可以刪除新添加的行
一、前端代
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>testPic</title> <script src="IndusJS/jquery.min.js"></script> <style type="text/css"> table,tr,td,th { border:1px solid; border-collapse:collapse; } td,th { width:30px; height:31px; } </style> <script type="text/javascript"> var tt1 = 0; var myArr = new Array(); $(function () { getList(); }); function setArray() { var json = JSON.stringify(myArr); $.ajax({ type: "post", url: 'Home/getArr', data: { pid: json }, dataType: "text", traditional: true,//這里設置為true success: function (data) { } }); } function getList() { $.ajax({ type: "post", url: 'Home/getTestDICData', data: { pid: 1 }, dataType: "json", success: function (data) { var html = ''; $.each(data, function (index, val) { if (index == "picBase64") { if (val.length > 0) { for (var i = 0; i < val.length; i++) { html = html + '<tr IsNew="0">'; html = html + '<td>' + val[i].ID + '</td>'; html = html + '<td>' + val[i].valName + '</td>'; html = html + '</tr>'; } } } }); var sstt; sstt = sstt + '<tr>'; sstt = sstt + '<th> 編號 </th>'; sstt = sstt + '<th> 名稱 </th>'; sstt = sstt + '</tr>'; sstt = sstt + html; $('#tr').html(sstt);//通過jquery方式獲取table，並把tr,td的html輸出到table中 testSX(); getInt(); setArray(); }, error: function () { alert("查詢失敗！"); } }); } function testSX() { var tt = $("#tr tr"); var contrTemp = []; for (var i = 1; i < tt.length; i++) { contrTemp.push($(tt[i]).attr('IsNew')); } console.log(contrTemp); } function addRow() { tt1++; var rowTem = '<tr IsNew="1" class="tr_' + tt1 + '">' + '<td><input type="Text" id="text' + tt1 + '" /></td>' + '<td><input type="Text" id="txt' + tt1 + '"/></td>' + '<td><a href="#" onclick=delRow(' + tt1 + ') >刪除</a></td>' + '</tr>'; $("#tr tbody:last").append(rowTem); } //刪除行 function delRow(_id) { $("#tr .tr_" + _id).hide(); } //獲取新添加行的數值 function getInt() { var k; var att = {};//創建一個空的json var id, number_, name;//定義四個變量，分別是表格中索要獲取的分類id、編號、名稱、上傳圖 var Array01 = [];//一個空的數組 var tt = $("#tr tr"); for (var i = 1; i < tt.length; i++) { if ($(tt[i]).attr('IsNew') == '1') { att = { 'ID':$(tt[i]).find('td').eq(0).text(),//分類id 'valName': $(tt[i]).find('td').eq(1).text()//分類名稱 }; Array01.push(att);//把json數據寫入數組 } } myArr = Array01; } </script> </head> <body> <form id="form1" runat="server"> <table class="table" id="tr" style="text-align: center;"> </table> <input type="button" value="添加行" onclick="addRow();" /> </form> </body> </html>
二、后台代碼
public JsonResult getTestDICData() { picModel model = new picModel(); subPicMolde k1 = new subPicMolde() { ID=1, valName="值1" }; subPicMolde k2= new subPicMolde() { ID = 2, valName = "值2" }; subPicMolde k3 = new subPicMolde() { ID = 3, valName = "值3" }; subPicMolde k4 = new subPicMolde() { ID = 4, valName = "值4" }; List<subPicMolde> myList = new List<subPicMolde>(); myList.Add(k1); myList.Add(k2); myList.Add(k3); myList.Add(k4); model.picBase64 = myList; return Json(model,JsonRequestBehavior.DenyGet); } public JsonResult getArr() { string ps = Request.Params["pid"].ToString(); JavaScriptSerializer jsSerializer=new JavaScriptSerializer(); List<subPicMolde> jd = jsSerializer.Deserialize<List<subPicMolde>>(ps); subPicMolde model = new subPicMolde() { ID = 1, valName = "123" }; return Json(model,JsonRequestBehavior.DenyGet); } public class picModel { public List<subPicMolde> picBase64; } public class subPicMolde { public int ID { get; set; } public string valName { get; set; } }