巧妙使用JQuery Clone 添加多行数据,并更新到数据库
2024-09-05 02:59:27
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 = ;
if (num > )
{
for (int i = ; 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) > )
rs++;
}
Response.Redirect("Manager.aspx?rs=" + rs);
}
}
}
}
最新文章
- Enterprise Solution 进销存管理软件 C/S架构,支持64位系统 物流,资金流,信息流全面集成
- jQuery的选择器中的通配符使用介绍
- Redis在windows下安装和PHP中使用
- 犀利的background-clip:text,实现K歌字幕效果
- Linux命令学习-date
- LeetCode First Bad Version (二分查找)
- ME23N PO 打印预览 打印问题
- Long和Date数据类型之间相互转换代码 - 调整时间推前往后,截取long型日期方法。
- Remobjects SDK 服务器搭建
- ruby脚本打印日志到rspec的报告文件中
- linux 声音大小调整的命令
- python中__init__.py文件的作用
- JVM启动参数手册——JVM之八
- Struct 和 Union 的详细区别
- :nth-child(n)
- Android开发之Android&#160;Context&#160;Menu
- nasm汇编一些需要注意的地方
- maven dependency的版本冲突问题
- linux上部署Appach,让文件目录以网页列表形式访问
- SSM框架整合思想
热门文章
- 60个DevOps开源工具,你在用哪些?
- C.0689-The 2019 ICPC China Shaanxi Provincial Programming Contest
- thinkphp5使用第三方没有使用命名空间的类库
- Django 03 模板路径、模板变量、常用的过滤器
- 洛谷2747(不相交路线、dp)
- 一些有关PyCharm使用总结
- 【SQL Server 优化性能的几个方面】(转)
- 强制更新客户端Silverlight XAP 文件
- 剑指Offer——数组中出现次数超过一半的数字——一题多解
- 前后端API交互数据加密——AES与RSA混合加密完整实例