巧妙使用JQuery Clone 添加多行数据,并更新到数据库的实现代码

web前端代码: 
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="BatchAdd.aspx.cs" Inherits="BatchAdd" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title></title> 
</head> 
<body> 
<form id="form1" runat="server" action="BatchAdd.aspx"> 
<div> 
<table id="tblData"> 
<tr> 
<td> 
ID 
</td> 
<td> 
Title 
</td> 
<td> 
SmallClassName 
</td> 
<td> 
Author 
</td> 
<td> 
UpdateTime 
</td> 
</tr> 
<tr id="tRow0"> 
<td> 
<input type="text" id="txtID" name="txtID0" /> 
</td> 
<td> 
<input type="text" id="txtTitle" name="txtTitle0" /> 
</td> 
<td> 
<input type="text" id="txtSmallClassName" name="txtSmallClassName0" /> 
</td> 
<td> 
<input type="text" id="txtAuthor" name="txtAuthor0" /> 
</td> 
<td> 
<input type="text" id="txtUpdateTime" name="txtUpdateTime0" /> 
</td> 
</tr> 
</table> 
<input type="hidden" id="hidNum" name="hidNum" value="0" /> 
<input type="button" id="btnAdd" value="Add" /> 
<input type="submit" id="btnSave" value="Save" /> 
</div> 
</form> 
</body> 
</html> 
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script> 
<script language="javascript" type="text/javascript"> 
$(function() { 
$("#btnAdd").click(function() { 
var num = $("#hidNum").val(); // 
num = parseInt(num); 
num++; //点击自加 
$("#hidNum").val(num); //重新赋值 
$("#tRow0").clone(true).attr("id", "tRow" + num).appendTo("#tblData"); //clone tr 并重新给定ID,装到table 
$("#tRow" + num + " td").each(function() {//循环克隆的新行里面的td 
$(this).find("input[type=‘text‘]").val(""); //清空克隆行的数据 
//修改相关属性 
$(this).find("input[name=‘txtID0‘]").attr("id", "txtID" + num).attr("name", "txtID" + num); 
$(this).find("input[name=‘txtTitle0‘]").attr("id", "txtTitle" + num).attr("name", "txtTitle" + num); 
$(this).find("input[name=‘txtSmallClassName0‘]").attr("id", "txtSmallClassName" + num).attr("name", "txtSmallClassName" + num); 
$(this).find("input[name=‘txtAuthor0‘]").attr("id", "txtAuthor" + num).attr("name", "txtAuthor" + num); 
$(this).find("input[name=‘txtUpdateTime0‘]").attr("id", "txtUpdateTime" + num).attr("name", "txtUpdateTime" + num); 
}); 
}); 
}); 
</script>

cs页面代码:

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.UI; 
using System.Web.UI.WebControls; 
public partial class BatchAdd : System.Web.UI.Page 

protected void Page_Load(object sender, EventArgs e) 

if (!string.IsNullOrEmpty(Request["hidNum"])) 

int num = Convert.ToInt32(Request["hidNum"]); 
string id, title, smallClassName, author, updatetime; 
int rs = 0; 
if (num > 0) 

for (int i = 0; i <= num; i++) 

id = Request["txtID" + i]; 
title = Request["txtTitle" + i]; 
smallClassName = Request["txtSmallClassName" + i]; 
author = Request["txtAuthor" + i]; 
updatetime = Request["txtUpdateTime" + i]; 
string sql = "insert into News(Title,SmallClassName,Author,Updatetime) values(‘" + title + "‘,‘" + smallClassName + "‘,‘" + author + "‘,‘" + updatetime + "‘)"; 
DBHelper.connString = "server=.;database=test;uid=sa;pwd=123"; 
if (DBHelper.ExecuteSql(sql) > 0) 
rs++; 

Response.Redirect("Manager.aspx?rs=" + rs); 



}

时间: 2024-08-09 05:53:45

巧妙使用JQuery Clone 添加多行数据,并更新到数据库的实现代码的相关文章

jquery动态添加删除一行数据

<html> <head> <title>添加.删除一行</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/jquery-1.9.1.js"></script>

Element Table 动态合并 添加整行数据

效果如图所 添加整行数据,前面几列还是合并状态 直接上代码 1 // 获取列表, 2 getTableDataList() { 3 this.tableData3 = [ 4 { 5 all: "a1", 6 name: "名字1", 7 value1: "b1", 8 value2: 1, 9 value3: "2017年-10月" 10 }, 11 { 12 all: "a1", 13 name: &q

jquery dataTable 获取某行数据

DataTable API table.row(rowSelector [,modifier]) 注table是dataTable的对象 该方法有两个默认参数 第一个是选择器 第二个是可选的 请注意,如果选择器匹配多个行,则此方法将截断结果以仅包含一行,即第一个匹配的行.如果没有参数返回第一行. 读取数据时用 table.row(rowSelector [,modifier]).data()即可 比如双击获取行数据 var table = $('#example').DataTable(); $

JQuery - 动态添加Html后,如何使CSS生效,JS代码可用?

今天在开发JQuery Mobile程序时候,需要从服务器取得数据,随后显示在页面上的Listview控件中,数据完整获取到了,也动态添加到Listview控件中,但是数据对应的CSS没有任何效果了,而且操作数据的JS代码也不好使了!!! 一,使动态加载数据对应的CSS生效. //刷新Listview,使CSS生效 $("#控件ID").listview("refresh"); 在加载完数据代码之后,加入上面代码,把"控件ID"换成你的真正的Li

为何jquery动态添加的input value无法提交到数据库?【坑】

有两个输入框,我想让第一个输入框失去焦点以后,第二个输入框自动获取第一个输入框的value为默认值,jquery代码如下,可以正常显示,但是用PHP提交数据,并插入数据库的时候确实空值,尚未查找到原因. 1 $("input#input_1").blur(function(){ 2 $("input#input_2").val($(this).val()); 3 }); 现在处在开发阶段,先实现主要功能,这个以后要修复!

SqlSever基础 insert 给一个数据库中的表中的一个列一次性添加多行数据

1 code 1 --select * from sysdatabases 2 3 --指定数据库 4 use helloworld 5 --查看该数据库中的Teacher表格列有哪几个 6 select * from Teacher 7 -- 向 teacher表格中的ShengHao一次加入两行数据 8 insert into Teacher(ShengHao) 9 values('女娲娘娘'), 10 ('无盐娘娘') 11 2 show

jquery 数组添加不重复数据

var columnCommentsArray = new Array(); $("input[name='columnComments']").each( function(){ var columnComments = $(this).val(); if("" == columnComments) { flag = false; message += "字段名不能为空!<br/>"; return false; } else {

jquery 请求ie缓存,数据不更新的问题【ajax禁用缓存解决ie数据不更新的问题】

在做ajax页面无刷新添加的时候,IE下遭遇Ajax缓存,因为刚开始并不知道IE有这个坏毛病,折腾好久,终于解决问题.总结一下解决办法: 在IE下用Ajax请求某一页面,通常会因为缓存的原因而返回上一次的结果,造成混乱,[即get方式时,获取数据,因发送参数和地址都一致,故IE浏览器会从缓存中取,而不会去请求服务器端,而post方式因为参数的不同,不会产生这个问题]而FF下不会出现这种情况.为了不受缓存影响,可以这样做: IE访问策略:Internet选项--浏览历史记录--设置-- Inter

sql-server的添加数据库文件(日志数据)以及收缩数据库文件(日志数据)

环境: SSMS sql-server2016 一.为数据库添加数据文件 添加日志数据文件 以下是添加数据文件和日志文件的代码 ALTER DATABASE [joinbest] ADD FILE ( NAME = N'joinbest_2', FILENAME = N'C:\Program Files\Microsoft SQL Server\MSSQL13.MSSQLSERVER\MSSQL\DATA\joinbest_2.ndf' , SIZE = 8192KB , FILEGROWTH