巧妙使用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 添加多行数据,并更新到数据库的实现代码的更多相关文章
- 巧妙使用JQuery Clone 添加多行数据,并更新到数据库
WEB代码: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="BatchAdd. ...
- jquery 动态添加表格行
jquery 动态添加表格行 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <h ...
- jquery dataTable 获取某行数据
DataTable API table.row(rowSelector [,modifier]) 注table是dataTable的对象 该方法有两个默认参数 第一个是选择器 第二个是可选的 请注意, ...
- JQuery对ASP.NET MVC数据进行更新删除
以前学习ASP.NET MVC时,学习与应用,操作过数据显示,添加,编辑,更新和删除等功能. 很多方法是相通的,看自己是怎样来进行方便,快捷,高效率. 今天Insus.NET写的练习,是直接对绑定在T ...
- JQuery - 动态添加Html后,如何使CSS生效,JS代码可用?
今天在开发JQuery Mobile程序时候,需要从服务器取得数据,随后显示在页面上的Listview控件中,数据完整获取到了,也动态添加到Listview控件中,但是数据对应的CSS没有任何效果了, ...
- 为何jquery动态添加的input value无法提交到数据库?【坑】
有两个输入框,我想让第一个输入框失去焦点以后,第二个输入框自动获取第一个输入框的value为默认值,jquery代码如下,可以正常显示,但是用PHP提交数据,并插入数据库的时候确实空值,尚未查找到原因 ...
- C#读取Txt大数据并更新到数据库
环境 Sqlserver 2016 .net 4.5.2 目前测试数据1300万 大约3-4分钟.(限制一次读取条数 和 线程数是 要节省服务器资源,如果调太大服务器其它应用可能就跑不了了), Sql ...
- Jquery动态添加多行,返回数据至每一行中
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="sys_channel_ed ...
- Jquery下拉列表添加移除数据
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- 【千纸诗书】—— PHP/MySQL二手书网站后台开发之功能实现
前言:前一篇温习了网站开发需要掌握的基础知识,这一篇重点梳理一下各个功能模块的[详细设计与实现].项目github地址:https://github.com/66Web/php_book_store, ...
- CentOS7安装Gnome GUI图形界面
CentOS7安装Gnome GUI图形界面 最小化安装了.当时没 注意,后面一步步安装完了,结果直接启动到命令行模式了. 晕,又不想重新安装,直接想从命令行模式安装.在网上找了半天,终于找到一点小 ...
- Java中Vector与ArrayList的差别具体解释
首先看这两类都实现List接口,而List接口一共同拥有三个实现类.各自是ArrayList.Vector和LinkedList.List用于存放多个元素,可以维护元素的次序,而且同意元素的反复. 3 ...
- rails delegate机制
Delegate是一种应用composite来代替extend的机制,可以有效地降低代码的耦合性. Rails 2.2增加了delegate方法,可以十分方便地实现delegate机制. 01.def ...
- 倍福TwinCAT(贝福Beckhoff)常见问题(FAQ)-如何设置PLC的扫描周期,运行周期
双击PlcTask,然后再Cycle ticks中可以修改PLC的扫描周期,例如修改为2ms 为了验证是否真的是2ms,可以在程序中跟计数器绑定使用,PLC2ms扫描一次,计数器也是每个周期增加0 ...
- 实用且免费API接口2
之前已经整理过一些免费API,现在在知乎专栏上看到别人整理的一些实用免费API,有一些是没有重复的,因此也搬过来. 今天的内容,很适合你去做一些好玩.实用的东西出来. 先来科普个概念,开放应用程序的A ...
- Python程序员的10个常见错误
关于Python Python是一门解释性的,面向对象的,并具有动态语义的高级编程语言.它高级的内置数据结构,结合其动态类型和动态绑定的特性,使得它在快速应用程序开发(Rapid Applicatio ...
- Apache 配置:是否显示文件列表
Apache 配置:是否显示文件列表 进入虚拟主机配置文件 显示文件列表的话 options Indexes FollowSymLinks 不显示文件列表的话 options FollowSymLin ...
- Linux 下动态查找磁盘数量方法
#!/bin/bash ##磁盘数量 Disk=$( fdisk -l |grep 'Disk' |grep 'sd' |awk -F , '{print "%s",substr( ...
- socket websocket
1.websocket客户端 websocket允许通过JavaScript建立与远程服务器的连接,从而实现客户端与服务器间双向的通信.在websocket中有两个方法: 1.send() 向远程服务 ...