JQery 动态填充数据到table 中
Posted net064
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQery 动态填充数据到table 中相关的知识，希望对你有一定的参考价值。
说明：
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; }
}
以上是关于JQery 动态填充数据到table 中的主要内容，如果未能解决你的问题，请参考以下文章