巧妙使用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); } } } }
巧妙使用JQuery Clone 添加多行数据，并更新到数据库的实现代码
标签：datetime ble 添加 数据库 click lan c# htm generic
小编还为您整理了以下内容，可能对您也有帮助：
Jquery 的clone方法动态增加行,事件问题。
本文主要介绍了jQuery实现 上升、下降、删除、添加一行代码的实现方法,非常不错，具有参考借鉴价值，需要的朋友可以参考下，希望能帮助大家更好的运用jQuery。
应用场景：
多值排序、分类排序等操作
此代码是经过实践后，实现方法简洁，而且不会丢失（js添加一行人工填入的Input值）input值
依赖Jquery，不依赖其它扩展
Javascript代码
实现效果
Jquery 的clone方法动态增加行,事件问题。
本文主要介绍了jQuery实现 上升、下降、删除、添加一行代码的实现方法,非常不错，具有参考借鉴价值，需要的朋友可以参考下，希望能帮助大家更好的运用jQuery。
应用场景：
多值排序、分类排序等操作
此代码是经过实践后，实现方法简洁，而且不会丢失（js添加一行人工填入的Input值）input值
依赖Jquery，不依赖其它扩展
Javascript代码
实现效果
实现将datagridview中(多行数据)更新到SQL数据库中
这个我做的课程设计有用到，是断开连接环境到SQL数据。
private void 商店一_商品_Load(object sender, EventArgs e)
{
sqlConn = new SqlConnection("Data Source=ASUS-PC\\SQLEXPRESS;Initial Catalog=SUPERMARKET;Integrated Security=True;");
/SqlConnection连接到本地服务器ASUS-PC，数据库SUPERMARKET，使用windows身份验证
sqlDa = new SqlDataAdapter("SELECT * FROM dbo.商店一_商品", sqlConn);
//Sql适配器以从表dbo.商店一_商品选择所有列作为命令，绑定到SqlConnection
sqlDs = new DataSet();//为数据集分配内存
sqlDa.Fill(sqlDs, "dbo.商店一_商品");//适配器填充到数据集中的表"dbo.商店一_商品"
dataGridView1.DataSource = sqlDs.Tables["dbo.商店一_商品"];
//dataGridView1以数据集中的表"dbo.商店一_商品"作为其数据源
SqlCommandBuilder sqlCmdBuilder = new SqlCommandBuilder(sqlDa);
//然后用SqlCommandBuilder自动为SqlDataAdapter生成Insert、Update、Delete命令
}
点button1批量更新到数据库：
private void button1_Click_1(object sender, EventArgs e)
{
if (sqlDs.HasChanges())//如果数据集因我们对datagridview的操作发生改变
{追问我自己搞定了。但是这里贴不了代码，系统说太长。
实现将datagridview中(多行数据)更新到SQL数据库中
这个我做的课程设计有用到，是断开连接环境到SQL数据。
private void 商店一_商品_Load(object sender, EventArgs e)
{
sqlConn = new SqlConnection("Data Source=ASUS-PC\\SQLEXPRESS;Initial Catalog=SUPERMARKET;Integrated Security=True;");
/SqlConnection连接到本地服务器ASUS-PC，数据库SUPERMARKET，使用windows身份验证
sqlDa = new SqlDataAdapter("SELECT * FROM dbo.商店一_商品", sqlConn);
//Sql适配器以从表dbo.商店一_商品选择所有列作为命令，绑定到SqlConnection
sqlDs = new DataSet();//为数据集分配内存
sqlDa.Fill(sqlDs, "dbo.商店一_商品");//适配器填充到数据集中的表"dbo.商店一_商品"
dataGridView1.DataSource = sqlDs.Tables["dbo.商店一_商品"];
//dataGridView1以数据集中的表"dbo.商店一_商品"作为其数据源
SqlCommandBuilder sqlCmdBuilder = new SqlCommandBuilder(sqlDa);
//然后用SqlCommandBuilder自动为SqlDataAdapter生成Insert、Update、Delete命令
}
点button1批量更新到数据库：
private void button1_Click_1(object sender, EventArgs e)
{
if (sqlDs.HasChanges())//如果数据集因我们对datagridview的操作发生改变
{追问我自己搞定了。但是这里贴不了代码，系统说太长。
asp+js如何实现提交多行数据到数据库中保存？
首先，需要在前端页面中使用ASP与JavaScript来动态生成多行的表单元素，每行包含一个商品ID、商品名称和商品价格的输入框。使用循环生成一个指定数量的行，这里设置为7行。在每个输入框中，使用ASP的<%=i%>语法来生成唯一的ID，以便后面方便取值。
然后，在后端ASP代码中，可以使用Request对象来获取前端提交的数据。基于前端生成的ID，可以通过循环来获取每个输入框中的值，并将其保存到数据库中：
Dim connString
Dim conn
Dim sql
' 获取数据库连接字符串，这里假设使用SQL Server数据库
connString = "Provider=SQLOLEDB;Data Source=(local);Initial Catalog=YourDatabase;User ID=YourUsername;Password=YourPassword"
' 创建数据库连接对象
Set conn = Server.CreateObject("ADODB.Connection")
' 打开数据库连接
conn.Open connString
' 循环遍历每一行的数据
For i = 0 To 7
' 获取当前行的商品ID、商品名称和商品价格
proctId = Request.Form("ProctId_" & i)
proctName = Request.Form("ProctName_" & i)
proctPrice = Request.Form("ProctPrice_" & i)
' 构建插入数据的SQL语句
sql = "INSERT INTO Procts (ProctId, ProctName, ProctPrice) VALUES ('" & proctId & "', '" & proctName & "', '" & proctPrice & "')"
' 执行SQL语句
conn.Execute sql
Next
' 关闭数据库连接
conn.Close
Set conn = Nothing
使用ADODB.Connection对象创建数据库连接，并打开连接。
通过循环从Request.Form中获取每个输入框中的值。构建插入数据的SQL语句，并通过conn.Execute方法执行SQL语句将数据保存到数据库中。
需要注意的是，没有对输入的值进行任何的验证和过滤，存在SQL注入等安全隐患。
在HTML中，建立一个提交表单页面，提交后可以直接在数据库看见。
<html>
<head>
<title>同一个页面中多表单提交</title>
<scripttype="text/javascript">
functionmyCheck1()
{
if(form1.text1.value=="")
{
alert("内容不能为空,请输入内容");
form1.text1.focus();
return;
}
form1.submit();
}
functionmyCheck2()
{
if(form2.text2.value=="")
{
alert("内容不能为空,请输入内容");
form2.text2.focus();
return;
}
form2.submit();
}
functionmyCheck3()
{
if(form3.text3.value=="")
{
alert("内容不能为空,请输入内容");
form3.text3.focus();
return;
}
form3.submit();
}
</script>
</head>
<body>
<formname="form1"method="post"action="#">
表单一:<inputname="text1"type="text">
<inputname="submit1"type="submit"value="提交"οnclick="myCheck1();">
</form>
<formname="form2"method="post"action="#">
表单二:<inputname="text2"type="text">
<inputname="submit2"type="submit"value="提交"οnclick="myCheck2();">
</form>
<formname="form3"method="post"action="#">
表单三:<inputname="text3"type="text">
<inputname="submit3"type="submit"value="提交"οnclick="myCheck3();">
<%
request.setCharacterEncoding("UTF-8");
Stringtext1=request.getParameter("text1");
Stringtext2=request.getParameter("text2");
Stringtext3=request.getParameter("text3");
Stringmessage="";
if(text1!=null)
{
message="你提交了第1个表单，表单内容为:"+text1;
}
if(text2!=null)
{
message="你提交了第2个表单，表单内容为:"+text2;
}
if(text3!=null)
{
message="你提交了第3个表单，表单内容为:"+text3;
}
%>
<h2><%=message%></h2>
</form>
</body>
</html>
扩展资料
在HTML文档中，<form></form>标记对用来定义表单的开始和结束。在表单<form></form>之间嵌入各类表单控件标记(表单元素)——如文本输入框、列表框、单选按钮、提交按钮等——供用户输入信息数据。
表单控件标记和表单<form>标记一起工作，共同发挥作用<form>标记的重要属性。<input>能够演变为表单中许多不同的元素，取决于type属性。