软件下载 | 资讯教程 | 最近更新 | 下载排行 | 一键转帖 | 发布投稿
您的位置:最火下载站 > 网络编程 > ASP.NET > asp.net利用ajax获取动态创建表中文本框的值

asp.net利用ajax获取动态创建表中文本框的值

通常在做主从表的数据录入中,会碰到在一个页面上同时录入主表数据和从表数据,主表的数据只有一条,从表的数据有一条到多条,这样就要动态创建从表数据录入入口。

假设现在主表为公司表(公司ID,公司名称,公司类型,公司规模),从表为部门表(部门ID,公司ID,经理,联系电话),现在一个公司有四个部门,要在同一个页面上录入公司信息以及四个部门的信息,如何动态创建部门信息录入口,以及如何获取数据存储到数据库中,请看下面的代码。

页面HTML代码及js脚本

1 <%@ Page Language="C#" AutoEventWireup="true" Codebehind="Default.aspx.cs" Inherits="WebApp._Default" %>
2
3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4 <html xmlns="http://www.w3.org/1999/xhtml">
5 <head runat="server">
6 <title>Untitled Page</title>
7
8 <script language="javascript" type="text/javascript">
9 function addRow()
10 {
11 var tbl = document.getElementById("tbl");
12 var rows = tbl.rows.length;
13
14 var tr = tbl.insertRow(rows);
15 var td;
16 for(var i=0;i<4;i++)
17 {
18 td = tr.insertCell(i);
19 if(i==3)
20 td.innerHTML = "<a id='a"+rows+"' href='#' onclick='delRow(this)'>删除</a>";
21 else
22 td.innerHTML = "<input id='txt"+rows+i+"' type='text' />";
23 }
24 }
25 function delRow(obj)
26 {
27 var tbl = document.getElementById("tbl");
28 tbl.deleteRow(obj.parentNode.parentNode.rowIndex);
29 }
30 function getPageData()
31 {
32 var companyName = document.getElementById("txtCompanyName");
33 var companySize = document.getElementById("txtCompanySize");
34 var companyType = document.getElementById("ddlCompanyType");
35 var tbl = document.getElementById("tbl");
36 var txt;
37 var datas = new Array(tbl.rows.length-1);
38 for(var i=1;i<tbl.rows.length;i++)
39 {
40 txt = tbl.rows[i].getElementsByTagName("input");
41 datas[i-1] = txt[0].value +","+ txt[1].value+","+ txt[2].value;
42 }
43
44 PageMethods.GetData(companyName.value,companySize.value,companyType.options[companyType.selectedIndex].value, datas, showResult);
45 }
46 function showResult(msg)
47 {
48 alert(msg);
49 }
50 </script>
51
52 </head>
53 <body>
54 <form id="form1" runat="server">
55 <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"></asp:ScriptManager>
56 <table>
57 <tr>
58 <td>
59 公司名称:</td>
60 <td>
61 <asp:TextBox ID="txtCompanyName" runat="server"></asp:TextBox></td>
62 <td>
63 公司规模:</td>
64 <td>
65 <asp:TextBox ID="txtCompanySize" runat="server"></asp:TextBox></td>
66 <td>
67 公司类型:</td>
68 <td>
69 <asp:DropDownList ID="ddlCompanyType" runat="server">
70 </asp:DropDownList></td>
71 </tr>
72 </table>
73 <input id="btnAddRow" type="button" value="新增一行" onclick="addRow();" />
74 <table id="tbl">
75 <tr>
76 <td>
77 部门</td>
78 <td>
79 电话</td>
80 <td>
81 经理</td>
82 <td>
83 </td>
84 </tr>
85 <tr>
86 <td>
87 <input id="txt10" type="text" /></td>
88 <td>
89 <input id="txt11" type="text" /></td>
90 <td>
91 <input id="txt12" type="text" /></td>
92 <td>
93 <a id="a1" href='#' onclick="delRow(this)">删除</a></td>
94 </tr>
95 </table>
96 <input id="btnOK" type="button" value="确定" onclick="getPageData();" />
97 <br />
98 </form>
99 </body>
100 </html>

相关阅读
网友评论
栏目导航
推荐软件