ASP.NET - Add/Remove TableRow dynamically in Table

2019-07-18 19:01发布

问题:

I have a System.Web.UI.WebControls.Table with one ROW with five cells with five server controls. I want when click on "Add new row" to create a new ROW and how to set a name on first row cells ?

How to do this? Please give me similar tutorials.

This is my UI:

This is my code:

public class HelloWorldWeb : WebPart
{
    protected override void CreateChildControls()
    {
        //table Cells Controls
        TextBox txt1 = new TextBox();
        txt1.Height = 19;
        TextBox txt2 = new TextBox();
        txt2.Height = 19;
        TextBox txt3 = new TextBox();
        txt3.Height = 19;
        DateTimeControl dt1 = new DateTimeControl();
        dt1.DateOnly = true;
        DateTimeControl dt2 = new DateTimeControl();
        dt2.DateOnly = true;
        Button btnAdd = new Button();
        btnAdd.Text = "Create New Row";
        btnAdd.Click += new EventHandler(btnAdd_Click);


        //Declaration one Row and Five Cells(with controls)
        Table myTbl = new Table();
        TableRow tRow = new TableRow();

        TableCell tCellOne = new TableCell();
        tCellOne.Controls.Add(txt1);
        tRow.Cells.Add(tCellOne);

        TableCell tCellTwo = new TableCell();
        tCellTwo.Controls.Add(dt1);
        tRow.Cells.Add(tCellTwo);

        TableCell tCellThree = new TableCell();
        tCellThree.Controls.Add(dt2);
        tRow.Cells.Add(tCellThree);

        TableCell tCellFour = new TableCell();
        tCellFour.Controls.Add(txt2);
        tRow.Cells.Add(tCellFour);

        TableCell tCellFive = new TableCell();
        tCellFive.Controls.Add(txt3);
        tRow.Cells.Add(tCellFive);

        myTbl.Rows.Add(tRow);

        this.Controls.Add(new LiteralControl("<table class='ms-formbody' vAlign='top' >"));

        this.Controls.Add(new LiteralControl("<tr>"));
        this.Controls.Add(new LiteralControl("<td width='100' class='ms-formlabel' noWrap='nowrap' vAlign='top'>"));
        this.Controls.Add(myTbl);
        this.Controls.Add(btnAdd);
        this.Controls.Add(new LiteralControl("</td>"));
        this.Controls.Add(new LiteralControl("</tr>"));

        this.Controls.Add(new LiteralControl("</table>"));

        base.CreateChildControls();
    }

    void btnAdd_Click(object sender, EventArgs e)
    {
        throw new NotImplementedException();
    }

The result must be :

回答1:

I'm not sure what type of project you are working in but using a simple Web Form I can achieve this:

Test.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="Stackoverflow.Test" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>

<body>
    <form id="form1" runat="server">
        <div>
            <table class="ms-formbody" valign="top">
                <tbody>
                    <asp:Literal ID="litTest" runat="server"></asp:Literal>
                </tbody>
            </table>

            <asp:Button ID="btnAdd" runat="server" Text="Create New Row" OnClick="btnAdd_Click" />
        </div>
    </form>
</body>
</html>

Test.aspx.cs:

using System;
using System.Web.UI;

namespace Stackoverflow
{
    public partial class Test : Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
                AddRow();
        }

        protected void btnAdd_Click(object sender, EventArgs e)
        {
            AddRow();
        }

        private void AddRow()
        {
            litTest.Text += "<tr><td><input type=\"text\" style=\"height: 19px;\"></td><td><input type=\"text\" style=\"height: 19px;\"></td><td><input type=\"text\" style=\"height: 19px;\"></td></tr>";
        }
    }
}


回答2:

I like ryantpayton's method, but here's your code revised:

public class HelloWorldWeb : WebPart
{
    public HelloWorldWeb()
    {
        CreateTable();
    }
    private void CreateTable()
    {
        //table Cells Controls
        TextBox txt1 = new TextBox();
        txt1.Height = 19;
        TextBox txt2 = new TextBox();
        txt2.Height = 19;
        TextBox txt3 = new TextBox();
        txt3.Height = 19;
        DateTimeControl dt1 = new DateTimeControl();
        dt1.DateOnly = true;
        DateTimeControl dt2 = new DateTimeControl();
        dt2.DateOnly = true;
        Button btnAdd = new Button();
        btnAdd.Text = "Create New Row";
        btnAdd.Click += new EventHandler(btnAdd_Click);


        //Declaration one Row and Five Cells(with controls)
        Table myTbl = new Table();
        myTbl.ID = "tblUsers";
        TableRow tRow = new TableRow();

        TableCell tCellOne = new TableCell();
        tCellOne.Controls.Add(txt1);
        tRow.Cells.Add(tCellOne);

        TableCell tCellTwo = new TableCell();
        tCellTwo.Controls.Add(dt1);
        tRow.Cells.Add(tCellTwo);

        TableCell tCellThree = new TableCell();
        tCellThree.Controls.Add(dt2);
        tRow.Cells.Add(tCellThree);

        TableCell tCellFour = new TableCell();
        tCellFour.Controls.Add(txt2);
        tRow.Cells.Add(tCellFour);

        TableCell tCellFive = new TableCell();
        tCellFive.Controls.Add(txt3);
        tRow.Cells.Add(tCellFive);

        myTbl.Rows.Add(tRow);

        this.Controls.Add(myTbl);
        this.Controls.Add(btnAdd);

    }

    private void AddNewRow()
    {
        Table tbl = (Table)this.FindControl("tblUsers");

        //table Cells Controls
        TextBox txt1 = new TextBox();
        txt1.Height = 19;
        TextBox txt2 = new TextBox();
        txt2.Height = 19;
        TextBox txt3 = new TextBox();
        txt3.Height = 19;
        DateTimeControl dt1 = new DateTimeControl();
        dt1.DateOnly = true;
        DateTimeControl dt2 = new DateTimeControl();
        dt2.DateOnly = true;

        TableRow tRow = new TableRow();

        TableCell tCellOne = new TableCell();
        tCellOne.Controls.Add(txt1);
        tRow.Cells.Add(tCellOne);

        TableCell tCellTwo = new TableCell();
        tCellTwo.Controls.Add(dt1);
        tRow.Cells.Add(tCellTwo);

        TableCell tCellThree = new TableCell();
        tCellThree.Controls.Add(dt2);
        tRow.Cells.Add(tCellThree);

        TableCell tCellFour = new TableCell();
        tCellFour.Controls.Add(txt2);
        tRow.Cells.Add(tCellFour);

        TableCell tCellFive = new TableCell();
        tCellFive.Controls.Add(txt3);
        tRow.Cells.Add(tCellFive);

        tbl.Rows.Add(tRow);
    }

    void btnAdd_Click(object sender, EventArgs e)
    {
        AddNewRow();
    }
}