说明：

1、把数据库中的数据查询出来，填充到前台的table中，注意 从数据查询出来的 属性IsNew="0"（table 行tr的属性）

2、单击“添加”按钮 新添加行追加到table的尾部 属性IsNew="1"（table 行tr的属性）

3、也可以删除新添加的行

一、前端代

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head runat="server">
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.     <title>testPic</title>
  6.     <script src="IndusJS/jquery.min.js"></script>
  7.     <style type="text/css">
  8.         table,tr,td,th
  9.         {
  10.             border:1px solid;
  11.             border-collapse:collapse;
  12.         }
  13.         td,th
  14.         {
  15.             width:30px;
  16.             height:31px;
  17.         }
  18.     </style>
  19.     <script type="text/javascript">
  20.         var tt1 = 0;
  21.         var myArr = new Array();
  22.         $(function () {
  23.             getList();
  24.         });
  25.         function setArray()
  26.         {
  27.          var json = JSON.stringify(myArr);
  28.          $.ajax({
  29.             type: "post",
  30.             url: 'Home/getArr',
  31.             data: { pid: json },
  32.             dataType: "text",
  33.             traditional: true,//这里设置为true
  34.             success: function (data) {
  35.             }
  36.          });
  37.         }
  38.         function getList() {
  39.             $.ajax({
  40.                 type: "post",
  41.                 url: 'Home/getTestDICData',
  42.                 data: { pid: 1 },
  43.                 dataType: "json",
  44.                 success: function (data) {
  45.                     var html = '';
  46.                     $.each(data, function (index, val) {
  47.                         if (index == "picBase64") {
  48.                             if (val.length > 0) {
  49.                                 for (var i = 0; i < val.length; i++) {
  50.                                     html = html + '<tr IsNew="0">';
  51.                                     html = html + '<td>' + val[i].ID + '</td>';
  52.                                     html = html + '<td>' + val[i].valName + '</td>';
  53.                                     html = html + '</tr>';
  54.                                 }
  55.                             }
  56.                         }
  57.                     });
  58.                     var sstt;
  59.                     sstt = sstt + '<tr>';
  60.                     sstt = sstt + '<th> 编号 </th>';
  61.                     sstt = sstt + '<th> 名称 </th>';
  62.                     sstt = sstt + '</tr>';
  63.                     sstt = sstt + html;
  64.  
  65.                     $('#tr').html(sstt);//通过jquery方式获取table，并把tr,td的html输出到table中
  66.                     testSX();
  67.                     getInt();
  68.                     setArray();
  69.                 },
  70.                 error: function () {
  71.                     alert("查询失败！");
  72.                 }
  73.             });
  74.         }
  75.         function testSX()
  76.             {
  77.                 var tt = $("#tr tr");
  78.                 var contrTemp = [];
  79.                 for (var i = 1; i < tt.length; i++) {
  80.                     contrTemp.push($(tt[i]).attr('IsNew'));
  81.  
  82.                 }
  83.                 console.log(contrTemp);
  84.             }
  85.         function addRow() {
  86.                 tt1++;
  87.                 var rowTem = '<tr IsNew="1" class="tr_' + tt1 + '">'
  88.                     + '<td><input type="Text" id="text' + tt1 + '" /></td>'
  89.                     + '<td><input type="Text" id="txt' + tt1 + '"/></td>'
  90.                     + '<td><a href="#" onclick=delRow(' + tt1 + ') >删除</a></td>'
  91.                     + '</tr>';
  92.                 $("#tr tbody:last").append(rowTem);
  93.             }
  94.         //删除行
  95.         function delRow(_id) {
  96.                 $("#tr .tr_" + _id).hide();
  97.         }
  98.         //获取新添加行的数值
  99.         function getInt() {
  100.                 var k;
  101.                 var att = {};//创建一个空的json
  102.                 var id, number_, name;//定义四个变量，分别是表格中索要获取的分类id、编号、名称、上传图
  103.                 var Array01 = [];//一个空的数组
  104.                 var tt = $("#tr tr");
  105.                 for (var i = 1; i < tt.length; i++) {
  106.                     if ($(tt[i]).attr('IsNew') == '1')
  107.                     {
  108.                         att = {
  109.                             'ID':$(tt[i]).find('td').eq(0).text(),//分类id
  110.                             'valName': $(tt[i]).find('td').eq(1).text()//分类名称
  111.                         };
  112.                         Array01.push(att);//把json数据写入数组
  113.                     }
  114.                 }
  115.                 myArr = Array01;
  116.  
  117.             }
  118.  
  119.     </script>
  120. </head>
  121. <body>
  122.     <form id="form1" runat="server">
  123.         <table class="table" id="tr" style="text-align: center;">
  124.         </table>
  125.          <input type="button" value="添加行" onclick="addRow();" />
  126.     </form>
  127. </body>
  128. </html>

二、后台代码

  1.         public JsonResult getTestDICData()
  2.         {
  3.             picModel model = new picModel();
  4.             subPicMolde k1 = new subPicMolde() { ID=, valName="值1" };
  5.             subPicMolde k2= new subPicMolde()  { ID = , valName = "值2" };
  6.             subPicMolde k3 = new subPicMolde() { ID = , valName = "值3" };
  7.             subPicMolde k4 = new subPicMolde() { ID = , valName = "值4" };
  8.             List<subPicMolde> myList = new List<subPicMolde>();
  9.             myList.Add(k1);
  10.             myList.Add(k2);
  11.             myList.Add(k3);
  12.             myList.Add(k4);
  13.             model.picBase64 = myList;
  14.            return Json(model,JsonRequestBehavior.DenyGet);
  15.         }
  16.  
  17.    public JsonResult getArr()
  18.         {
  19.             string ps = Request.Params["pid"].ToString();
  20.             JavaScriptSerializer jsSerializer=new JavaScriptSerializer();
  21.             List<subPicMolde> jd = jsSerializer.Deserialize<List<subPicMolde>>(ps);
  22.  
  23.         subPicMolde model = new subPicMolde() { ID = , valName = "" };
  24.         return  Json(model,JsonRequestBehavior.DenyGet);
  25.         }
  26.  
  27.    public class picModel
  28.     {
  29.         public List<subPicMolde> picBase64;
  30.     }
  31.  
  32.     public class subPicMolde
  33.     {
  34.         public int ID { get; set; }
  35.         public string valName { get; set; }
  36.     }

JQery 动态填充数据到table 中的更多相关文章

  1. MFC中List控件动态填充数据(LVN_GETDISPINFO)

    在使用List控件的过程中,有时候List控件中需要添加大量的数据,如果使用InsertItem填充,会一次性将数据全部添加进List控件中,比较耗时.这里记录下如何动态添加List控件数据. 步骤 ...

  2. vuejs 中 select 动态填充数据,后台的数据

           selected:"A" 对       selected:A 错.  变量不用引号. 内容一定要引号. https://jsfiddle.net/rgnuaw30/ ...

  3. Jquery解析Json字符串,并且动态生成数据表格Table

    //ajax获得后台传来的json字符串 $.post("UserInfo.ashx", function (data) { //假设data="{T1:[{User_I ...

  4. OSI7层封包解包动态图-数据在网络中的传输过程.gif

  5. servlet中如何发送ajax请求并动态拼接数据到html中

    废话不多说,直接上代码 1.servlet 2.js 3.jsp 有不懂得欢迎来扣我哦^_^ 详细介绍请查看全文:https://cnblogs.com/qianzf/ 原文博客的链接地址:https ...

  6. 《项目经验》--后台一般处理程序向前台JS文件传递JSON，JS解析JSON,将数据显示在界面--显示在DropDownList 或 显示在动态创建的table中

    http://blog.csdn.net/mazhaojuan/article/details/8599167 先看一下我要实现的功能界面: 这篇文章主要介绍:后台一般处理程序把从数据库查找的数据,转 ...

  7. 向已有的table中插入数据

    table: <table id="seleted-table" class="table table-bordered table-hover" sty ...

  8. HTML5+中动态构建列表并填充数据

    部分代码参考demo----<历史上的今天>. 感谢作者的分享,愿好人一生平安,虽然只有两个页面,但是通过这个示例让我学会了5+中如何动态构建列表并填充数据,非常实用. html部分: & ...

  9. C#动态生成Word文档并填充数据

    C#也能动态生成Word文档并填充数据 http://www.cnblogs.com/qyfan82/archive/2007/09/14/893293.html 引用http://blog.csdn ...

随机推荐

  1. RTSP、 RTMP、HTTP的共同点、区别（转）

    共同点: 1:RTSP.RTMP.HTTP都是在应用层. 2:理论上RTSP.RTMP.HTTP都可以做直播和点播,但一般做直播用RTSP.RTMP,做点播用HTTP.做视频会议的时候原来用SIP协议 ...

  2. 慕课 python 操作数据库

    test_connection import MySQLdb conn = MySQLdb.Connect( host = '127.0.0.1', port = 3306, user = '**** ...

  3. hdu 4932 BestCoder Round #4 1002

    这题真是丧心病狂,引来今天的hack狂潮~ Miaomiao's Geometry Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65 ...

  4. C++的静态联编和动态联编详解

    一.概述: 通常来说联编就是将模块或者函数合并在一起生成可执行代码的处理过程,同时对每个模块或者函数调用分配内存地址,并且对外部访问也分配正确的内存地址,它是计算机程序彼此关联的过程.按照联编所进行的 ...

  5. 浅谈DPCHookSSDT和RemoveDPC

    最近学了DPC这一对,把Win7 32位和64位都做了,查阅了大量的资料,并且进行了大量调试,理一下思路,为了后面更好的学习. 转载请注明出处:http://www.cnblogs.com/littl ...

  6. Jmeter(四十九)_常用的性能测试监听器

    概述 jmeter中提供了很多性能数据的监听器,我们通过监听器可以来分析性能瓶颈 本文以500线程的阶梯加压测试结果来描述图表. 常用监听器 1:Transactions per Second 监听动 ...

  7. spring ConfigurableListableBeanFactory 接口

    接口继承关系如上图. ConfigurableListableBeanFactory具体: 1.2个忽略自动装配的的方法. 2.1个注册一个可分解依赖的方法. 3.1个判断指定的Bean是否有资格作为 ...

  8. Android -- 开机启动无界面后台程序

    简单的说,这是一个没有界面的后台运行的应用程序 而且,还有一功能:开机自启动,启动运行一个服务 程序结构非常简单,两个类,一个是service的扩展类,一个是BroadcastReceiver扩展类 ...

  9. SilverLight：布局（2）GridSplitter（网格分割）垂直分割、水平分割

    ylbtech-SilverLight-Layout: 布局(2)GridSplitter(网格分割)垂直分割.水平分割 A, Splitter(分割)对象之 GridSplitter(网格分割)1: ...

  10. 如何直接打开使用locate等查找到的文件

    很多的时候需要使用locate去定位文件,找到了文件之后接下来就是使用相应的文本编辑工具如gvim进行打开. 这个时候最烦心的就是去复制一大长串的地址了. 如果能让定位和打开一体操作就最好了,这就需要 ...