ASP.NET - 在表中動態添加/刪除TableRow

我有一個System.Web.UI.WebControls.Table帶有一個具有五個單元的ROW和五個服務器控件。我想點擊「添加新行」來創建新的行和如何在第一行單元格上設置名稱？ASP.NET - 在表中動態添加/刪除TableRow

如何做到這一點？請給我類似的教程。

這是我的UI：

這是我的代碼：

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(); 
    }

的結果必然是：

來源

2016-04-21 Gohyu

使靜態計數器（這是ViewState的是好的使用），並讓您的控件創建代碼循環與計數器指示的一樣頻繁。「添加」按鈕增加計數器。 – Alexander

從我所知道的情況來看，您的按鈕點擊並沒有做任何事情。你在CreateChildControls中添加一個「EventHandler」，但這是不必要的。你只在頁面上有一個按鈕。使用「btnAdd_Click」事件並調用「CreateChildControls」函數。 –

我想你可以將行存儲在一個'List <>'中，每次點擊時在列表中添加一個新項目，然後只顯示該列表中的行。 –

我不知道你在工作什麼類型的項目，但使用簡單的Web窗體我可以做到這一點：

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>"; 
     } 
    } 
}

來源

2016-04-21 15:18:01 ryantpayton

我的解決方案是ClassLibrary ..該代碼必須只在「.cs」。 – Gohyu

我喜歡ryantpayton的方法，但這裏是你的代碼修改爲：

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(); 
    } 
}

來源

2016-04-21 15:28:43

你遺漏了添加按鈕，所以我加回來了。還可以通過調用CreateTemptyControls（）在btnAdd.Click進一步簡化？ – ryantpayton

我將把表中的數據保存到另一個，這將有可能與此解決方案？以及如何刪除行？ – Gohyu

這不工作CreateChildControls（）;在btnAdd_Click事件方法..：{ – Gohyu

ASP.NET - 在表中動態添加/刪除TableRow

回答

相關問題