none
关于动态添加表格问题~ RRS feed

  • 问题

  • 在做开发中,我们经常遇到什么单(到货单)
    到货日期、 采购类型等基本信息。
    但是为了提高用户体验,其中的什么采购明细都会使用动态添加表格行。
    比如金动力的(http://jxcs.jindongli.com.cn:8080/emadmin/index.jsp)进销存软件中的采购管理-到货单-新增到货

    可以直接点“添加货品”进行添加或删除多个到货明细。

    我做过,但是工作量太大。(js操作)
    在页面存值,后台取值。而且很麻烦(效率低,重新性差)

    尤其是修改最为麻烦。

    现在我就要一个简单的重用性高的一段代码或者控件什么的
    希望能共享一下~
    在下感激不尽~
    邮箱:156796551@qq.com


    付出不一定有回报,不付出那就一定没有回报!
    2009年12月1日 3:32

答案

  • 满足需要的东西都是自己写的,别人写的一般都是通用性质的或者思路性质的,要哦结合到实际,一般需要自己来写了。
    添加表格采用dhtml 的insertCell,insertRow就能完成。你说的工作量太大不知道是什么程度
    【孟子E章】
    2009年12月1日 14:41
    版主
  • 关于动态添加行可以参考下面的代码试试。需要注意的是下面例子中引入了一个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">&nbsp;</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
    2009年12月3日 2:01

全部回复

  • 满足需要的东西都是自己写的,别人写的一般都是通用性质的或者思路性质的,要哦结合到实际,一般需要自己来写了。
    添加表格采用dhtml 的insertCell,insertRow就能完成。你说的工作量太大不知道是什么程度
    【孟子E章】
    2009年12月1日 14:41
    版主
  • 关于动态添加行可以参考下面的代码试试。需要注意的是下面例子中引入了一个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">&nbsp;</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
    2009年12月3日 2:01
  • 我说的工作量大~是因为我用的方法太麻烦了~
    前台用JS取值存到隐藏域里面~后台再取值,然后拆分数据,录入到数据库里面~

    修改数据的时候就反过来操作~

    我主要是想问有什么好的解决办法~能实现~
    付出不一定有回报,不付出那就一定没有回报!
    2009年12月4日 6:09
  • jquery还真不知道怎么用~
    我先看看~
    付出不一定有回报,不付出那就一定没有回报!
    2009年12月4日 6:11
  • 看完了~
    比我自己做的那个显示出来的效果更简单~

    我主要的问题是在后台这样方便取值,和修改数据的时候,再从后台把赋给前台(您所给的方法能简单实现:粗略看了下)~
    付出不一定有回报,不付出那就一定没有回报!
    2009年12月4日 6:22
  • 方便取值:我这里是把textbox的id号有规律的输出,并将其id号的尾数保存在hidden中,这样在服务器端就可以有规律的读取了。
    不知道你说的方便是不是这个意思。
    Microsoft Online Community Support
    2009年12月4日 6:54