專解疑難雜症的程式筆記: [ASP.NET]動態產生網頁表格內容

有的時候網頁可能會隨著資料不同需求不同

來呈現不同的內容

像是表格就是其中一例

在這裡寫一個可以依照使用者設定產生他所需要的表格大小

類似的方法也可以應用在像是填寫某些人員資料

但你又不曉得使用者會填寫幾個人的情況

只要隨使用者的需求動態產生即可

<body>
    <form id="form1" runat="server">
<div>
列：<asp:DropDownList ID="Row" runat="server" AutoPostBack="True">
                <asp:ListItem>1</asp:ListItem>
                <asp:ListItem>2</asp:ListItem>
                <asp:ListItem>3</asp:ListItem>
            </asp:DropDownList>
行：<asp:DropDownList ID="Column" runat="server" AutoPostBack="True">
                <asp:ListItem>1</asp:ListItem>
                <asp:ListItem>2</asp:ListItem>
                <asp:ListItem>3</asp:ListItem>
            </asp:DropDownList
            <asp:Table ID="tableExample" runat="server" BorderColor="#FFFFFF" BorderStyle="Solid"
                BorderWidth="1px" CellPadding="0" CellSpacing="0" GridLines="Both">
            </asp:Table>
        </div>
</form>
</body>

protected void Page_Load(object sender, EventArgs e)
{
    TableCell TCell;
    TableRow TRow;
    int RowNumber = int.Parse(Row.SelectedValue);
    int ColumnNumber = int.Parse(Column.SelectedValue);

    for (int i = 0; i < RowNumber; i++)
    {
        TRow = new TableRow();
        TRow.ForeColor = Color.Yellow;
        TRow.Width = Unit.Pixel(300);
        TRow.Height = Unit.Pixel(30);

        if (i % 2 == 0)
            TRow.BackColor = Color.BlueViolet;
        else
            TRow.BackColor = Color.Green;

        for (int j = 0; j < ColumnNumber; j++)
        {
            TCell = new TableCell();             
            Label lb = new Label();
            lb.ID = "exampleLabe" + RowNumber * i + j;
            lb.Text = "範例" + (RowNumber * i + j).ToString();
            lb.ForeColor = Color.Yellow;

            TCell.Controls.Add(lb);
            TCell.Width = Unit.Pixel(int.Parse(TRow.Width.Value.ToString()) / ColumnNumber);
            TCell.HorizontalAlign = HorizontalAlign.Center;

            TRow.Cells.Add(TCell);
        }
        tableExample.Rows.Add(TRow);
    }
}

TableRow代表的是每列的物件

而TableCell代表的是每列的每一格(就是行)

這邊是以使用者選擇的行列數來決定產生幾行幾列

每列寬300px高30px

在TableCell中塞入Label物件顯示內容

如果需要設定CSS可以使用CssClass的屬性

跨欄或跨列可以使用ColumnSpane跟RowSpan設定

假設使用者要輸入十筆資料

那麼你只需要用迴圈findControl十次

而你要find的ID可以用"exampleLabe" + RowNumber * i;之類的方式產生

如此就能用字串組合的方式找到你要的ID

以下是執行結果