Clever use of JQuery Clone to add multiple lines of data and update the implementation code to the database

2020-05-16 06:45:57
OfStack

web front-end code:

 
<%@ 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++; // Click on the add  
$("#hidNum").val(num); // To assign a value  
$("#tRow0").clone(true).attr("id", "tRow" + num).appendTo("#tblData"); //clone tr  And give it again ID, to table 
$("#tRow" + num + " td").each(function() {// Inside the new row of circular cloning td 
$(this).find("input[type='text']").val(""); // Empty the clone row data  
// Modify related properties  
$(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 page code:

 
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); 
} 
} 
} 
}