JS动态添加删除控件_示例

最新推荐文章于 2017-07-13 18:26:38 发布

weixin_34293902

最新推荐文章于 2017-07-13 18:26:38 发布

阅读量125

点赞数

文章标签： javascript 数据库 ViewUI

原文链接：http://www.cnblogs.com/indexsky/archive/2012/12/02/JS%e5%8a%a8%e6%80%81%e

版权

考察前一篇的技术，自己做了个JS动态添加控件（有增加、删除和添加数据存储）

.aspx页面:

 1 <html>
 2 <head>
 3 <script type="text/javascript">
 4 //添加一条记录
 5 function addRow(){
 6 var otab=document.getElementById("tab").insertRow(-1);
 7 var ddlSpe=document.getElementById("ddlSpe");
 8 var txtName=document.getElmentById("txtName");
 9 
10 var otd1=document.createElement("td");
11 otd1.innerHTML='编制人：<span>'+ddlSpe.value+'</span>';
12 var otd2 = document.createElement("td");
13 otd2.innerHTML = '专业：<span>' + txtName.value + '</span>';
14 var otd3 = document.createElement("td");
15 otd3.innerHTML = '<input id="dell" type="button" class="button" οnclick="Delete();" value="dell" />';
16 otab.appendChild(otd1);
17 otab.appendChild(otd2);
18 otab.appendChild(otd3);
19 document.getElementById("hidSpe").value += ddlSpe.value + ',';
20 document.getElementById("hidName").value +=txtName.value + ',';
21 }
22 
23 //对隐藏控件hidSpe和hidName值的绑定，当页面加载完成以后会调用次函数
24         function add() {
25             var hidSpes = document.getElementById("hidSpe").value;
26             var hidName = document.getElementById("hidName").value;
27             var Spe = hidSpes.split(',');
28             var Name = hidName.split(',');
29             var ddlSpe = document.getElementById("ddlSpe");
30             var txtName = document.getElementById("txtName");
31             for (var i = 0; i < Spe.length; i++) {
32                 var otr = document.getElementById("tab").insertRow(-1);
33                 var otd1 = document.createElement("td");
34                 otd1.innerHTML = '编制人：<span>' + Name[i] + '</span>';
35                 var otd2 = document.createElement("td");
36                 otd2.innerHTML = '专业：<span>' + Spe[i] + '</span>';
37                 var otd3 = document.createElement("td");
38                 otd3.innerHTML = '<input id="dell" type="button" class="button" οnclick="Delete();" value="dell" />';
39                 otr.appendChild(otd1);
40                 otr.appendChild(otd2);
41                 otr.appendChild(otd3); 
42             }
43             txtName.value = "";
44         }
45 
46 //删除控件，并把所有已经加载的控件的值保存到隐藏控件中
47         function Delete() {
48             var currRowIndex = event.srcElement.parentNode.parentNode.rowIndex; //获取当前索引
49             document.getElementById("tab").deleteRow(currRowIndex);
50             var tab = document.getElementById("tab");
51             var hidSpe = "";
52             var hidName = "";
53             for (var i = 0; i < tab.rows.length; i++) {
54                 hidSpe += tab.rows[i].cells[0].all[0].innerText + ",";
55                 hidName += tab.rows[i].cells[1].all[0].innerText + ",";
56            }
57             document.getElementById("hidSpe").value = hidSpe;
58             document.getElementById("hidName").value = hidName;
59         }
60 </script>
61 </head>
62 <body>
63 <table id="tab">
64  </table>
65 
66     <form id="form1" runat="server">
67     <div>
68     <input type="hidden" id="hidSpe" runat="server" value="" />
69     <input type="hidden" id="hidName" runat="server" value="" />
70     编制人：<asp:DropDownList runat="server" ID="ddlSpe"></asp:DropDownList>
71     专业：<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
72     <input id="Button1" type="button" οnclick="AddRow()" runat="server" value="添加" />`
73     </div>
74     </form>
75 
76 </body>
77 </html>
78 <script type="text/javascript">
79     add();
80 </script>

.cs页面:

protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            this.ddlSpe.DataSource = CreateData(); //下拉框数据源的绑定
            this.ddlSpe.DataTextField = "Spe";
            this.ddlSpe.DataValueField = "id";
            this.ddlSpe.DataBind();
            this.hidSpe.Value = "Empire Burlesque,Hide your Heart";//如果你在数据库中取的数据，最后有“，”，请把逗号splic(',');
        }
    }

转载于:https://www.cnblogs.com/indexsky/archive/2012/12/02/JS%e5%8a%a8%e6%80%81%e6%b7%bb%e5%8a%a0%e5%88%a0%e9%99%a4%e6%8e%a7%e4%bb%b6_%e6%95%b0%e6%8d%ae%e5%ad%98%e5%82%a8.html