巧妙使用JQuery Clone 添加多行数据，并更新到数据库的实现代码
程序员文章站
2024-03-07 16:33:03
web前端代码: 复制代码 代码如下: <%@ page language="c#" autoeventwireup="true" codefile="batchad...
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);
}
}
}
}
复制代码 代码如下:
<%@ 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);
}
}
}
}