• 巧妙使用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); 



  • 相关阅读:
    Kafka设计解析(二):Kafka High Availability (上)
    使用Storm实现实时大数据分析
    Kafka消息的可靠性测试--针对直播业务的方案选择
    天机镜—优土大数据平台应用级别监控神器
    Kafka文件存储机制那些事
    Hbase框架原理及相关的知识点理解、Hbase访问MapReduce、Hbase访问Java API、Hbase shell及Hbase性能优化总结
    《BI那点儿事—数据的艺术》目录索引
    面试中的排序算法总结
    HBase二级索引与Join
    Hbase 学习(九) 华为二级索引(原理)
  • 原文地址:https://www.cnblogs.com/sjqq/p/6536480.html
Copyright © 2020-2023  润新知