积极答复者
关于动态添加表格问题~

问题
-
在做开发中,我们经常遇到什么单(到货单)
到货日期、 采购类型等基本信息。
但是为了提高用户体验,其中的什么采购明细都会使用动态添加表格行。
比如金动力的(http://jxcs.jindongli.com.cn:8080/emadmin/index.jsp)进销存软件中的采购管理-到货单-新增到货
可以直接点“添加货品”进行添加或删除多个到货明细。
我做过,但是工作量太大。(js操作)
在页面存值,后台取值。而且很麻烦(效率低,重新性差)
尤其是修改最为麻烦。
现在我就要一个简单的重用性高的一段代码或者控件什么的
希望能共享一下~
在下感激不尽~
邮箱:156796551@qq.com
付出不一定有回报,不付出那就一定没有回报!
答案
-
关于动态添加行可以参考下面的代码试试。需要注意的是下面例子中引入了一个jquery的脚本,可以到http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js下载。
<%@ Page Language="C#" %> <%@ Import Namespace="System" %> <%@ Import Namespace="System.Configuration" %> <%@ Import Namespace="System.Data" %> <%@ Import Namespace="System.Linq" %> <%@ Import Namespace="System.Web" %> <%@ Import Namespace="System.Web.Security" %> <%@ Import Namespace="System.Web.UI" %> <%@ Import Namespace="System.Web.UI.HtmlControls" %> <%@ Import Namespace="System.Web.UI.WebControls" %> <%@ Import Namespace="System.Web.UI.WebControls.WebParts" %> <%@ Import Namespace="System.Web.Services" %> <%@ Import Namespace="System.ComponentModel" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <script runat="server"> public DataTable GenerateDT { get { if (ViewState["ds"] != null) { return (ViewState["ds"] as DataSet).Tables[0]; } else { DataTable dt = new DataTable(); dt.Columns.Add("Id", typeof(int)); dt.Columns.Add("Test1", typeof(string)); dt.Columns.Add("Test2", typeof(string)); dt.Columns.Add("Test3", typeof(string)); dt.Columns.Add("UserName", typeof(string)); dt.Columns.Add("Password", typeof(string)); dt.Columns.Add("Bool", typeof(System.Boolean)); dt.PrimaryKey = new DataColumn[] { dt.Columns[0] }; DataRow dr1 = dt.NewRow(); dr1[0] = "1"; dr1[1] = "red"; dr1[2] = "test3"; dr1[3] = "test3"; dr1[4] = "Name1"; dr1[5] = ""; dr1[6] = true; dt.Rows.Add(dr1); DataRow dr2 = dt.NewRow(); dr2[0] = "2"; dr2[1] = "blue"; dr2[2] = "test3"; dr2[3] = "test3"; dr2[4] = "Name2"; dr2[5] = "2"; dr2[6] = true; dt.Rows.Add(dr2); DataRow dr3 = dt.NewRow(); dr3[0] = "3"; dr3[1] = "yellow"; dr3[2] = "test3"; dr3[3] = "test3"; dr3[4] = "Name2"; dr3[5] = ""; dr3[6] = true; dt.Rows.Add(dr3); DataSet ds = new DataSet(); ds.Tables.Add(dt); ViewState["ds"] = ds; return dt; } } set { ViewState["ds"] = value; } } </script> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="../Scripts/jquery-1.3.2.min.js" type="text/javascript"></script> </head> <body> <form id="form1" runat="server"> <div> <table cellspacing="0" border="1" id="table1" style="border-collapse:collapse;"> <thead> <tr> <th scope="col"> </th><th scope="col">Id</th><th scope="col">Test1</th><th scope="col">Test2</th><th scope="col">Test3</th><th scope="col">UserName</th><th scope="col">Password</th> </tr> </thead> <tbody id="testBody"> <%int rows =0; string indexCollection =","; %> <% foreach (DataRow item in GenerateDT.Rows) { indexCollection += rows.ToString()+",";%> <tr id='<%="tr"+rows.ToString() %>'> <td><input type="button" onclick="addRow(<%=rows %>)" value="Add Row" id="<%="row"+rows.ToString()+"Button0" %>"/><input type="button" onclick="deleteRow(<%=rows %>)" value="Delete Row" id="<%="row"+rows.ToString()+"Button1" %>"/></td> <td><input id="<%="row"+rows.ToString()+"Text0" %>" type="text" value='<%=item[0] %>'/></td> <td><input id="<%="row"+rows.ToString()+"Text1" %>" type="text" value='<%=item[1] %>'/></td> <td><input id="<%="row"+rows.ToString()+"Text2" %>" type="text" value='<%=item[2] %>'/></td> <td><input id="<%="row"+rows.ToString()+"Text3" %>" type="text" value='<%=item[3] %>'/></td> <td><input id="<%="row"+rows.ToString()+"Text4" %>" type="text" value='<%=item[4] %>'/></td> <td><input id="<%="row"+rows.ToString()+"Text5" %>" type="text" value='<%=item[5] %>'/></td> </tr> <% rows++; } %> </tbody> </table> <input id="Hidden1" type="hidden" /> <script type="text/javascript" language="javascript"> var indexCollection=<%="\""+indexCollection.ToString()+"\"" %>; setHiddenField(); var rows=<%=rows %>; function addRow(index) { rows=rows+1; var newTr="<tr id=\"tr"+rows+"\"><td><input type=\"button\" onclick=\"addRow('"+rows+"')\""+" value=\"Add Row\" id=\""+"row"+rows+"Button0"+"\"/>" +"<input type=\"button\" onclick=\"deleteRow('"+rows+"')\""+" value=\"Delete Row\" id=\""+"row"+rows+"Button1"+"\"/>" +"<td><input id=\""+"row"+rows+"Text0"+"\" type=\"text\"/></td>" +"<td><input id=\""+"row"+rows+"Text1"+"\" type=\"text\"/></td>" +"<td><input id=\""+"row"+rows+"Text2"+"\" type=\"text\"/></td>" +"<td><input id=\""+"row"+rows+"Text3"+"\" type=\"text\"/></td>" +"<td><input id=\""+"row"+rows+"Text4"+"\" type=\"text\"/></td>" +"<td><input id=\""+"row"+rows+"Text5"+"\" type=\"text\"/></td></tr>"; indexCollection=indexCollection+rows+","; $("#testBody").html($("#testBody").html()+newTr); setHiddenField(); } function deleteRow(index) { var reg=new RegExp("\\,"+index+"\\,"); indexCollection=indexCollection.replace(reg,","); var row=document.getElementById("tr"+index); document.getElementById("table1").deleteRow(row.rowIndex); setHiddenField(); } function setHiddenField() { document.getElementById("Hidden1").value=indexCollection.toString(); } </script> </div> </form> </body> </html>
Microsoft Online Community Support- 已标记为答案 KeFang Chen 2009年12月4日 2:35
全部回复
-
关于动态添加行可以参考下面的代码试试。需要注意的是下面例子中引入了一个jquery的脚本,可以到http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js下载。
<%@ Page Language="C#" %> <%@ Import Namespace="System" %> <%@ Import Namespace="System.Configuration" %> <%@ Import Namespace="System.Data" %> <%@ Import Namespace="System.Linq" %> <%@ Import Namespace="System.Web" %> <%@ Import Namespace="System.Web.Security" %> <%@ Import Namespace="System.Web.UI" %> <%@ Import Namespace="System.Web.UI.HtmlControls" %> <%@ Import Namespace="System.Web.UI.WebControls" %> <%@ Import Namespace="System.Web.UI.WebControls.WebParts" %> <%@ Import Namespace="System.Web.Services" %> <%@ Import Namespace="System.ComponentModel" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <script runat="server"> public DataTable GenerateDT { get { if (ViewState["ds"] != null) { return (ViewState["ds"] as DataSet).Tables[0]; } else { DataTable dt = new DataTable(); dt.Columns.Add("Id", typeof(int)); dt.Columns.Add("Test1", typeof(string)); dt.Columns.Add("Test2", typeof(string)); dt.Columns.Add("Test3", typeof(string)); dt.Columns.Add("UserName", typeof(string)); dt.Columns.Add("Password", typeof(string)); dt.Columns.Add("Bool", typeof(System.Boolean)); dt.PrimaryKey = new DataColumn[] { dt.Columns[0] }; DataRow dr1 = dt.NewRow(); dr1[0] = "1"; dr1[1] = "red"; dr1[2] = "test3"; dr1[3] = "test3"; dr1[4] = "Name1"; dr1[5] = ""; dr1[6] = true; dt.Rows.Add(dr1); DataRow dr2 = dt.NewRow(); dr2[0] = "2"; dr2[1] = "blue"; dr2[2] = "test3"; dr2[3] = "test3"; dr2[4] = "Name2"; dr2[5] = "2"; dr2[6] = true; dt.Rows.Add(dr2); DataRow dr3 = dt.NewRow(); dr3[0] = "3"; dr3[1] = "yellow"; dr3[2] = "test3"; dr3[3] = "test3"; dr3[4] = "Name2"; dr3[5] = ""; dr3[6] = true; dt.Rows.Add(dr3); DataSet ds = new DataSet(); ds.Tables.Add(dt); ViewState["ds"] = ds; return dt; } } set { ViewState["ds"] = value; } } </script> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="../Scripts/jquery-1.3.2.min.js" type="text/javascript"></script> </head> <body> <form id="form1" runat="server"> <div> <table cellspacing="0" border="1" id="table1" style="border-collapse:collapse;"> <thead> <tr> <th scope="col"> </th><th scope="col">Id</th><th scope="col">Test1</th><th scope="col">Test2</th><th scope="col">Test3</th><th scope="col">UserName</th><th scope="col">Password</th> </tr> </thead> <tbody id="testBody"> <%int rows =0; string indexCollection =","; %> <% foreach (DataRow item in GenerateDT.Rows) { indexCollection += rows.ToString()+",";%> <tr id='<%="tr"+rows.ToString() %>'> <td><input type="button" onclick="addRow(<%=rows %>)" value="Add Row" id="<%="row"+rows.ToString()+"Button0" %>"/><input type="button" onclick="deleteRow(<%=rows %>)" value="Delete Row" id="<%="row"+rows.ToString()+"Button1" %>"/></td> <td><input id="<%="row"+rows.ToString()+"Text0" %>" type="text" value='<%=item[0] %>'/></td> <td><input id="<%="row"+rows.ToString()+"Text1" %>" type="text" value='<%=item[1] %>'/></td> <td><input id="<%="row"+rows.ToString()+"Text2" %>" type="text" value='<%=item[2] %>'/></td> <td><input id="<%="row"+rows.ToString()+"Text3" %>" type="text" value='<%=item[3] %>'/></td> <td><input id="<%="row"+rows.ToString()+"Text4" %>" type="text" value='<%=item[4] %>'/></td> <td><input id="<%="row"+rows.ToString()+"Text5" %>" type="text" value='<%=item[5] %>'/></td> </tr> <% rows++; } %> </tbody> </table> <input id="Hidden1" type="hidden" /> <script type="text/javascript" language="javascript"> var indexCollection=<%="\""+indexCollection.ToString()+"\"" %>; setHiddenField(); var rows=<%=rows %>; function addRow(index) { rows=rows+1; var newTr="<tr id=\"tr"+rows+"\"><td><input type=\"button\" onclick=\"addRow('"+rows+"')\""+" value=\"Add Row\" id=\""+"row"+rows+"Button0"+"\"/>" +"<input type=\"button\" onclick=\"deleteRow('"+rows+"')\""+" value=\"Delete Row\" id=\""+"row"+rows+"Button1"+"\"/>" +"<td><input id=\""+"row"+rows+"Text0"+"\" type=\"text\"/></td>" +"<td><input id=\""+"row"+rows+"Text1"+"\" type=\"text\"/></td>" +"<td><input id=\""+"row"+rows+"Text2"+"\" type=\"text\"/></td>" +"<td><input id=\""+"row"+rows+"Text3"+"\" type=\"text\"/></td>" +"<td><input id=\""+"row"+rows+"Text4"+"\" type=\"text\"/></td>" +"<td><input id=\""+"row"+rows+"Text5"+"\" type=\"text\"/></td></tr>"; indexCollection=indexCollection+rows+","; $("#testBody").html($("#testBody").html()+newTr); setHiddenField(); } function deleteRow(index) { var reg=new RegExp("\\,"+index+"\\,"); indexCollection=indexCollection.replace(reg,","); var row=document.getElementById("tr"+index); document.getElementById("table1").deleteRow(row.rowIndex); setHiddenField(); } function setHiddenField() { document.getElementById("Hidden1").value=indexCollection.toString(); } </script> </div> </form> </body> </html>
Microsoft Online Community Support- 已标记为答案 KeFang Chen 2009年12月4日 2:35