JQery 動態填充資料到table 中
阿新 • • 發佈：2019-01-08
說明：
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; }
}