巧妙使用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 添加多行数据，并更新到数据库

相关推荐