动态根据checkbox 增加Dom

最新推荐文章于 2025-09-10 11:00:53 发布

转载最新推荐文章于 2025-09-10 11:00:53 发布 · 142 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/oran/p/4348835.html

文章标签：

#c# #ui #javascript #ViewUI

本文介绍了一个用于批量更新产品信息的网页设计，包括全选功能、输入按钮和表格展示，通过JavaScript实现批量选择和操作。实现了产品的批量更新功能，提供了用户友好的交互体验。

 1 <%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeBehind="TestForDemo.aspx.cs" Inherits="Maticsoft.Web.Product.TestForDemo" %>
 2 <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
 3     <script src="../js/checkBoxHelper.js"></script>
 4 </asp:Content>
 5 <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
 6     <input type="button" id="btn_Update" value="批量更新" />
 7     <span>全部选择:<input type="checkbox" name="SelectAll"   /></span>
 8     <table class="table">
 9         <thead>
10             <th>选择</th>            
11             <th>产品Id</th>
12             <th>名称</th>
13             <th>描述</th>
14             <th>生产厂家</th>
15             <th>价格</th>
16             <th>链接</th>
17             <th>标题 </th>
18         </thead>
19         <%=ConsTr %>
20         
21     </table>
22     <script type="text/javascript">
23         $(document).ready(function () {
24             $("input[name='SelectAll']").click(function () {
25                 if ($(this).attr("checked") == "checked") {
26                     checkBoxHelper.allChecked();
27                 }
28                 else {
29                     checkBoxHelper.allCancle();
30                     
31                 }
32             });
33             $("input[name='forTest']").click(function () {
34                 if ($(this).attr("checked") == "checked") {
35                    
36                     checkBoxHelper.addTr(this);
37                 }
38                 else {
39                     var $tr = $(this).parents("tr");
40                     $tr.next(".newrow").remove();
41 
42                 }
43             });
44             $("#btn_Update").click(function () {
45                 if ($(this).val() == "批量更新") {
46                     var check = checkBoxHelper.getChecked();
47                     if (check.length == 0) {
48                         alert("至少选择一个");
49                         return false;
50                     }
51                     $(this).val("保存");                    
52                     $.each(check, function (index, element) {
53                         checkBoxHelper.addTr(element);
54                     });
55                     
56 
57                 }
58                 else {
59                     $(this).val("批量更新");
60                     alert("保存成功");
61                 }
62 
63                
64             });
65         });
66 
67     </script>
68 </asp:Content>

HTML

 1 var checkBoxHelper = {
 2     ///全选
 3     allChecked: function () {
 4         $('input[name="forTest"]').attr("checked", "checked");
 5     },
 6     allCancle: function () {
 7         $("input[name='forTest']").each(function () {
 8             this.checked = !this.checked;
 9         });
10     },
11     getChecked: function () {
12         var check = new Array();
13         $("input[name='forTest']").each(function () {
14             if (this.checked) {
15                 check.push(this);
16             }
17         });
18 
19         return check;
20     },
21     addTr: function (element) {
22         var $tr = $(element).parents("tr");
23         if ($tr.next(".newrow").length>0) {
24             return false;
25         }
26         if ($("#btn_Update").val() == "批量更新") {
27             return false;
28         }
29         var price = $tr.find("#price").text();
30         var select = "<select>";
31         select += "<option>请选择</option>";
32         select += "<option>ywx236602</option>";
33         var $td = "<td>" + select + price + "</td>";
34         var aftertr = $("<tr class='newrow'></tr>");
35         aftertr.append($td);
36         $tr.after(aftertr);
37     }
38 
39 };

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Web;
 5 using System.Web.UI;
 6 using System.Web.UI.WebControls;
 7 using Maticsoft.Model;
 8 using System.Text;
 9 
10 namespace Maticsoft.Web.Product
11 {
12     public partial class TestForDemo : System.Web.UI.Page
13     {
14         public string ConsTr { get; set; }
15         protected void Page_Load(object sender, EventArgs e)
16         {
17             List<Products> prods = new BLL.Products().GetModelList("");
18             StringBuilder sb = new StringBuilder();
19             sb.Append("<tbody>");
20             foreach (var item in prods)
21             {
22                 sb.Append("<tr>");
23                 sb.AppendFormat("<td><input type='checkbox' name='forTest'  id='{0}'/></td>",item.ProductId);
24                 sb.AppendFormat("<td>{0}</td>", item.ProductId);
25                 sb.AppendFormat("<td>{0}</td>",item.Name);
26                 sb.AppendFormat("<td>{0}</td>",item.Description);
27                 sb.AppendFormat("<td>{0}</td>",item.Catagory);
28                 sb.AppendFormat("<td id='price'>{0}</td>",item.Price);
29                 sb.AppendFormat("<td>{0}</td>",item.Href);
30                 sb.AppendFormat("<td>{0}</td>",item.Title);
31                 sb.Append("</tr>");
32                
33             }
34             sb.Append("</tbody>");
35             ConsTr=sb.ToString();
36         }
37     }
38 }