如何动态添加数据行

最新推荐文章于 2025-09-14 06:42:14 发布

原创最新推荐文章于 2025-09-14 06:42:14 发布 · 505 阅读

本内容遵循CC 4.0 BY-SA版权协议

本文介绍了两种方法来动态添加数据行：一是通过ASP.NET后台代码，包括获取当前行数，增加和删除行的按钮事件，以及获取输入数据；二是利用jQuery在前端绘制，详细讲述了页面初始化和按钮响应事件的处理，同时表达了对使用jQuery获取数据技巧的进一步学习需求。

动态添加数据行

一、通过后台绘制

前端代码：

        <table id="tbDynamicDataRow" runat="server" class="tblUpdate" cellpadding="0" cellspacing="0" border="0" width="100%">
         <tr >
            <td class="title_bg title_textcenter" Width="100px">
                <asp:Label runat="server" ID="Label1" Text="请假类型"  ClientIDMode="Static" Width="50px"></asp:Label>
            </td>
             <td>
                <asp:DropDownList ID="lstType0"
                    AutoPostBack="true" runat="server" Width="90px">
                </asp:DropDownList>
            </td>
            <td class="title_bg title_textcenter" Width="140px"> 
                <asp:Label runat="server" ID="Labe3" Text="请假日期" Width="70px"></asp:Label>
            </td>
            <td Width="400px">
                <asp:TextBox ID="txtStartTime0" runat="server" autocomplete="off"  ></asp:TextBox>
              至
                <asp:TextBox ID="txtEndTime0" runat="server" autocomplete="off"></asp:TextBox>                                     
            </td>
             <td class="title_bg title_textcenter" Width="85px">  
                <asp:Button ID="btnAdd" Text="新增行" runat="server" OnClick="btnAdd_Click" ClientIDMode="Static" />
             </td>
             <td class="title_bg title_textcenter" Width="85px">
                 <asp:Button ID="btnDelete" Text="删除行" runat="server"  OnClick="btnDelete_Click" ClientIDMode="Static" disabled="false"/>
            </td>
        </tr>
      </table>

后台代码：

1.首先找出当前行数

    protected void Page_Load(object sender, EventArgs e)
    {
        if (ViewState["count"]!=null)
        {
            for (int i = 0; i < Convert.ToInt16(ViewState["count"]); i++)
                AddTr();
        }
    }

2.编写增加行按钮事件

    protected void btnAdd_Click(object sender, EventArgs e)
    {
        AddTr();
        ViewState["count"] = Convert.ToInt16(ViewState["count"]) + 1;
    }

private void AddTr()
    {
        //var trIndex = 0;
        HtmlTableRow tr = new HtmlTableRow();

        HtmlTableCell tdLeaveType = new HtmlTableCell();
        tdLeaveType.Attributes["class"]= "title_bg title_textcenter";
        tdLeaveType.Attributes["Width"] = "60px";
        Label lblLeaveType = new Label();
        lblLeaveType.ID = "lblLeaveType" + tbDynamicDataRow.Rows.Count;
        lblLeaveType.Attributes["Width"] = "60px";
        lblLeaveType.Text = "请假类型";

        HtmlTableCell tdLeaveTypeList = new HtmlTableCell();
        DropDownList lstType2 = new DropDownList();
        lstType2.ID = "lstType" + tbDynamicDataRow.Rows.Count;
        tdLeaveTypeList.Attributes["Width"] = "90px";
        lstType2.Attributes["Width"] = "90px";
        #region 给新增行的下拉框赋值
        try
        {
            #region 请假类型
            lstType2.Items.Clear();
            lstType2.Items.Add(new ListItem("--全部类型--", ""));
            CBasCodes types = CBasCode.LoadBySql("SELECT * FROM BasCode WHERE [Type]='LeaveType'AND [Status]='1' ORDER BY SortIndex");
            foreach (CBasCode type in types)
            {
                if (type.Code.Trim() != "7")
                {
                    lstType2.Items.Add(new ListItem(type.Name.Trim(), type.Code.Trim()));
                }

            }
            #endregion

        }
        catch (Exception ex)
        {
            LogError("BindDropDownList", ex);
            string error = ex.ToString();
        }
        #endregion

        HtmlTableCell tdLblLeaveTime = new HtmlTableCell();
        tdLblLeaveTime.Attributes["class"] = "title_bg title_textcenter";
        Label lblLeaveTime = new Label();
        lblLeaveTime.ID="lblLeaveTime"+ tbDynamicDataRow.Rows.Count;
        lblLeaveTime.Text = "请假时间";

        HtmlTableCell tdTxtLeaveTime = new HtmlTableCell();
        TextBox txtStartTime = new TextBox();
        txtStartTime.ID = "txtStartTime" + tbDynamicDataRow.Rows.Count;
        txtStartTime.Attributes["autocomplete"] = "off";
        Label lblLeaveTimeText = new Label();
        lblLeaveTimeText.ID = "lblLeaveTimeText" + tbDynamicDataRow.Rows.Count;
        lblLeaveTimeText.Text = " 至 ";
        TextBox txtEndTime = new TextBox();
        txtEndTime.ID = "txtEndTime"+tbDynamicDataRow.Rows.Count;
        txtEndTime.Attributes["autocomplete"] = "off";

        HtmlTableCell tdBtnAdd = new HtmlTableCell();
        tdBtnAdd.Attributes["class"] = "title_bg title_textcenter";
        Button btnAdd = new Button();
        btnAdd.ID = "btnAdd" + tbDynamicDataRow.Rows.Count;
        btnAdd.Text= "新增行";
        // btnAdd.OnClientClick = "AddTr()";
        btnAdd.Click += new System.EventHandler(btnAdd_Click);

        HtmlTableCell tdBtnDelete = new HtmlTableCell();
        tdBtnDelete.Attributes["class"] = "title_bg title_textcenter";
        Button btnDelete = new Button();
        btnDelete.ID = "btnDelete" + tbDynamicDataRow.Rows.Count;
        btnDelete.Text = "删除行";
        btnDelete.Click += new System.EventHandler(btnDelete_Click);

        tdLeaveType.Controls.Add(lblLeaveType);
        tr.Cells.Add(tdLeaveType);

        tdLeaveTypeList.Controls.Add(lstType2);
        tr.Cells.Add(tdLeaveTypeList);

        tdLblLeaveTime.Controls.Add(lblLeaveTime);
        tr.Cells.Add(tdLblLeaveTime);

        tdTxtLeaveTime.Controls.Add(txtStartTime);
        tdTxtLeaveTime.Controls.Add(lblLeaveTimeText);
        tdTxtLeaveTime.Controls.Add(txtEndTime);
        tr.Cells.Add(tdTxtLeaveTime);


        tdBtnAdd.Controls.Add(btnAdd);
        tr.Cells.Add(tdBtnAdd);

        tdBtnDelete.Controls.Add(btnDelete);
        tr.Cells.Add(tdBtnDelete);

        tbDynamicDataRow.Rows.Add(tr);

    }

2.编写删除行按钮事件

    protected void btnDelete_Click(object sender, EventArgs e)
    {

        tbDynamicDataRow.Rows.RemoveAt(tbDynamicDataRow.Rows.Count-1);
        ViewState["count"] = Convert.ToInt16(ViewState["count"]) - 1;
    }

3.获取输入的数据

通过“=”后的代码可以获取输入数据

            for (int i=0;i<tbDynamicDataRow.Rows.Count;i++)
            {
                var leaveDetail = new LeaveDetail();
                leaveDetail.LeaveType = ((DropDownList)tbDynamicDataRow.Rows[i].FindControl("lstType" + i)).SelectedItem.Text.Trim();
                leaveDetail.StartTime = ((TextBox)tbDynamicDataRow.Rows[i].FindControl("txtStartTime" + i)).Text.Trim();
                leaveDetail.EndTime = ((TextBox)tbDynamicDataRow.Rows[i].FindControl("txtEndTime" + i)).Text.Trim();
                leavelst.Add(leaveDetail);
            }
            LeaveForm.Detail = leavelst;

二、通过jQuery进行绘制

1.首先绘制页面

        function add() {
            var html = " <tr>" +
                            " <td class=\"title_bg title_textcenter\" Width = \"100px\"  value=\"请假类型\" > 请假类型" +                            
                            "</td >" +
                            "<td>" +
                           " <input  ID=\"lstType1\" type=\"DropDownList\"   AutoPostBack=\"true\" Width=\"150px\">" +
                            "</td >" +
                            " <td class=\"title_bg title_textcenter\" Width=\"140px\">请假时间" +
                            " </td >" +
                            " <td Width=\"400px\">" +
                             " <input ID=\"txtstartTime1\" type=\"TextBox\"  autocomplete=\"off\"  >" +
                            " 至" +
                            " <input ID=\"txtendTime1\" type=\"TextBox\"  autocomplete=\"off\"  >" +
                            " </td >" +
                            "<td class=\"title_bg title_textcenter\" Width=\"85px\">" +
                            " <input type=\"button\" value=\"添加行\" onclick=\"add()\">" +
                            "</td>" +
                            "<td class=\"title_bg title_textcenter\" Width=\"85px\">" +
                            " <input type=\"button\" value=\"删除行\" onclick=\'del(this)\'>" +
                            "</td>" +
                            " </tr>";
            $("#tbDynamicDataRow").append(html);
        }

        function del(obj) {
            $(obj).parent().parent().remove();
        }

2.通过按钮响应事件

 <table id="tbDynamicDataRow" class="tblUpdate" cellpadding="0" cellspacing="0" border="0" width="100%">
         <tr >
            <td class="title_bg title_textcenter" Width="100px">
                <asp:Label runat="server" ID="Labe2" Text="请假类型"  ClientIDMode="Static" Width="60px"></asp:Label>
            </td>
             <td>
                <asp:DropDownList ID="lstType1"
                    AutoPostBack="true" runat="server" Width="150px">
                </asp:DropDownList>
            </td>
            <td class="title_bg title_textcenter" Width="140px"> 
                <asp:Label runat="server" ID="Labe3" Text="请假日期" Width="70px"></asp:Label>
            </td>
            <td Width="400px">
                <asp:TextBox ID="txtstartTime1" runat="server" autocomplete="off"  ></asp:TextBox>
              至
                <asp:TextBox ID="txtendTime1" runat="server" autocomplete="off"></asp:TextBox>                                     
            </td>
            <td class="title_bg title_textcenter" Width="85px">
                <input type="button" value="添加行" onclick="add()">
            </td>
            <td class="title_bg title_textcenter"  Width="85px">
                 <input type="button"  value="删除行" onclick="del('this')">
            </td>
        </tr>
    </table>

通过jQuery获取数据的还不熟练，希望大神能够指正

标签