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=, valName="值1" };
subPicMolde k2= new subPicMolde() { ID = , valName = "值2" };
subPicMolde k3 = new subPicMolde() { ID = , valName = "值3" };
subPicMolde k4 = new subPicMolde() { ID = , 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 = , valName = "" };
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 中的更多相关文章
- MFC中List控件动态填充数据(LVN_GETDISPINFO)
在使用List控件的过程中,有时候List控件中需要添加大量的数据,如果使用InsertItem填充,会一次性将数据全部添加进List控件中,比较耗时.这里记录下如何动态添加List控件数据. 步骤 ...
- vuejs 中 select 动态填充数据,后台的数据
selected:"A" 对 selected:A 错. 变量不用引号. 内容一定要引号. https://jsfiddle.net/rgnuaw30/ ...
- Jquery解析Json字符串,并且动态生成数据表格Table
//ajax获得后台传来的json字符串 $.post("UserInfo.ashx", function (data) { //假设data="{T1:[{User_I ...
- OSI7层封包解包动态图-数据在网络中的传输过程.gif
- servlet中如何发送ajax请求并动态拼接数据到html中
废话不多说,直接上代码 1.servlet 2.js 3.jsp 有不懂得欢迎来扣我哦^_^ 详细介绍请查看全文:https://cnblogs.com/qianzf/ 原文博客的链接地址:https ...
- 《项目经验》--后台一般处理程序向前台JS文件传递JSON，JS解析JSON,将数据显示在界面--显示在DropDownList 或 显示在动态创建的table中
http://blog.csdn.net/mazhaojuan/article/details/8599167 先看一下我要实现的功能界面: 这篇文章主要介绍:后台一般处理程序把从数据库查找的数据,转 ...
- 向已有的table中插入数据
table: <table id="seleted-table" class="table table-bordered table-hover" sty ...
- HTML5+中动态构建列表并填充数据
部分代码参考demo----<历史上的今天>. 感谢作者的分享,愿好人一生平安,虽然只有两个页面,但是通过这个示例让我学会了5+中如何动态构建列表并填充数据,非常实用. html部分: & ...
- C#动态生成Word文档并填充数据
C#也能动态生成Word文档并填充数据 http://www.cnblogs.com/qyfan82/archive/2007/09/14/893293.html 引用http://blog.csdn ...
随机推荐
- C#:使用WebRequest类请求数据
本文翻译于:https://msdn.microsoft.com/en-us/library/456dfw4f(v=vs.110).aspx 下列程序描述的步骤用于从服务器请求一个资源,例如,一个We ...
- 51深入理解C指针之---指针与线程
一.size_t:用于安全表示长度,所有平台和系统都会解析成自己对应的长度 1.定义:size_t类型表示C中任何对象所能表示的最大长度,是个无符号整数:常常定义在stdio.h或stdlib.h中 ...
- js-在url后面添加时间戳清除浏览器打开页面的缓存
这个解决办法还是在网上搜出来的,我还没有测试呢: 我有想既然可以添加时间戳,那可以添加随机数吗?我感觉是可以的,尽管没有测试过. 2018-3-13 几天前我就这个问题询问过我们的后台,加时间戳能否真 ...
- 002如何升级 Linux 的内核？
我们不应该升级 Linux 内核,而是始终使用 rpm 命令来安装新的内核,因为升级内核会让你的 Linux 机器处于一个无法启动的状态.
- Java 界面编程【03】事件监听
当你把界面都设计好了,总需要添加相应的执行动作给组件,在JAVA中有相应的时间处理机制,叫做“监听器”,给组件添加相应执行动作的过程叫做“注册”,其中的“监听器”是一个接口,里面包含了相应的执行函数, ...
- ZSTU 4241 圣杯战争（ST表+二分）
题目链接 ZSTU 4241 问题转化为有很多区间,现在每次给定一个区间求这个区间和之前所有区间中的某一个的交集的最大长度. 强制在线. 首先我们把所有的区间预处理出来. 然后去重(那些被包含的小区 ...
- WEB接口测试之Jmeter接口测试自动化 (三)(数据驱动测试)
接口测试与数据驱动 1简介 数据驱动测试,即是分离测试逻辑与测试数据,通过如excel表格的形式来保存测试数据,用测试脚本读取并执行测试的过程. 2 数据驱动与jmeter接口测试 我们已经简单介绍 ...
- SpringMVC中 Controller的 @ResponseBody注解分析
需求分析:需要 利用 out 对象返回给财付通是否接收成功 .那么将需要如下代码: /** * 返回处理结果给财付通服务器. * @param msg: Success or fail. * @ ...
- xamarin studio 安装
公司wpf项目移植到mac,用到mono来进行重写,不会,自己开搞 首先一个问题Xamarin怎么读,xaml熟悉吧,xaml读作Zamel,xamarin也就读作Zamerin,恩,就是它了... ...
- 渗透测试思路 | Linux下自动化搭建FakeAP，劫持用户在Portal认证下的所有流量
如何在linux下搭建一个fakeap,使得portal认证下的用户无法发现连接你的假AP,并且能够正常上网.先说一下portal认证.无线WIFI认证方式主要有wpa2 和 open两种,而port ...