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

所属分类: 网络编程 / ASP.NET 阅读数: 992
收藏 0 赞 0 分享
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);
}
}
}
}
更多精彩内容其他人还在看

解析WPF实现音频文件循环顺序播放的解决方法

本篇文章是对WPF实现音频文件循环顺序播放的方法进行了详细的分析介绍,需要的朋友参考下
收藏 0 赞 0 分享

解决.net framework 4.0环境下遇到版本不同编译不通过的方法详解

本篇文章是对.net framework 4.0环境下遇到版本不同编译不通过的解决方法进行了详细的分析介绍,需要的朋友参考下
收藏 0 赞 0 分享

将文件上传、下载(以二进制流保存到数据库)实现代码

将文件以二进制流的格式写入数据库:首先获得文件路径,然后将文件以二进制读出保存在一个二进制数组中具体请祥看本文,希望对你有所帮助
收藏 0 赞 0 分享

点击提交按钮后DropDownList的值变为默认值实现分析

在点击提交按钮后,页面上所有的绑定到数据库的控件值都恢复到默认值,下面与大家分享下DropDownList的值变为默认值
收藏 0 赞 0 分享

ASP.NET web.config中数据库连接字符串connectionStrings节的配置方法

ASP.NET web.config中数据库连接字符串connectionStrings节的配置方法,需要的朋友可以参考一下
收藏 0 赞 0 分享

Linkbutton控件在项目中的简单应用

Button控件可分为button控件、LinkButton控件、ImageButton控件三类,而LinkButton控件则在页面上显示为一个超级链接,下面与大家分享下其具体应用
收藏 0 赞 0 分享

Web.config 和 App.config 的区别分析

Web.config 和 App.config 的区别分析,需要的朋友可以参考一下
收藏 0 赞 0 分享

基于.Net中的数字与日期格式化规则助记词的使用详解

本篇文章是对.Net中的数字与日期格式化规则助记词的使用进行了详细的分析介绍,需要的朋友参考下
收藏 0 赞 0 分享

解决在Web.config或App.config中添加自定义配置的方法详解

本篇文章是对在Web.config或App.config中添加自定义配置的方法进行了详细的分析介绍,需要的朋友参考下
收藏 0 赞 0 分享

深入本机影像生成器(Ngen.exe)工具使用方法详解

本篇文章是对本机影像生成器(Ngen.exe)工具使用方法进行了详细的分析介绍,需要的朋友参考下
收藏 0 赞 0 分享
查看更多