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

巧妙使用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); 
} 
} 
} 
} 