巧妙使用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代碼:

View Code

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);                
           }
       }
   }
}


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章