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

  }

  }

  }

  }