Question

通过该主题的MSDN article，我们可以看到我们创建的TableHeaderRow包含TableHeaderCell s。

但是他们像这样添加表头：

myTable.Row.AddAt(0, headerRow);

输出HTML：

<table id="Table1" ... > 
<tr> 
    <th scope="column" abbr="Col 1 Head">Column 1 Header</th>
    <th scope="column" abbr="Col 2 Head">Column 2 Header</th>
    <th scope="column" abbr="Col 3 Head">Column 3 Header</th> 
</tr>
<tr> 
    <td>(0,0)</td>
    <td>(0,1)</td>
    <td>(0,2)</td>
</tr>

...

它应该有<thead>和<tbody> （因此它可以与tablesorter无缝协作）：）

<table id="Table1" ... > 
<thead>
<tr> 
    <th scope="column" abbr="Col 1 Head">Column 1 Header</th>
    <th scope="column" abbr="Col 2 Head">Column 2 Header</th>
    <th scope="column" abbr="Col 3 Head">Column 3 Header</th> 
</tr>
</thead>
<tbody>
<tr> 
    <td>(0,0)</td>
    <td>(0,1)</td>
    <td>(0,2)</td>
</tr>
    ...
    </tbody>

HTML aspx代码

<asp:Table ID="Table1" runat="server" />

如何输出正确的语法？

正如信息一样，GridView控件内置了此功能，因为我们只需要设置可访问性并使用HeaderRow

gv.UseAccessibleHeader = true;
gv.HeaderRow.TableSection = TableRowSection.TableHeader;
gv.HeaderRow.CssClass = "myclass";

但问题是Table控件。

Answer 1

刚刚找到了这样做的方法，我们确实需要使用从基础控件继承的自己的控件，例如Table

public class myTable : System.Web.UI.WebControls.Table
{
    protected override void OnPreRender(EventArgs e)
    {
        Table table = Controls[0] as Table;

        if (table != null && table.Rows.Count > 0)
        {
            // first row is the Table Header <thead>
            table.Rows[0].TableSection = TableRowSection.TableHeader;
            // last row is the Footer Header <tfoot> (comment for not using this)
            table.Rows[table.Rows.Count - 1].TableSection = TableRowSection.TableFooter;

            FieldInfo field = typeof(WebControl).GetField("tagKey", BindingFlags.Instance | BindingFlags.NonPublic);
            foreach (TableCell cell in table.Rows[0].Cells)
                field.SetValue(cell, HtmlTextWriterTag.Th);
        }
        base.OnPreRender(e);
    }
}

也适用于DataGrid

public class myDataGrid : System.Web.UI.WebControls.DataGrid 
{
    protected override void OnPreRender(EventArgs e)
    {
        Table table = Controls[0] as Table;

        if (table != null && table.Rows.Count > 0)
        {
            // first row is the Table Header <thead>
            table.Rows[0].TableSection = TableRowSection.TableHeader;
            // last row is the Footer Header <tfoot> (comment for not using this)
            table.Rows[table.Rows.Count - 1].TableSection = TableRowSection.TableFooter;

            FieldInfo field = typeof(WebControl).GetField("tagKey", BindingFlags.Instance | BindingFlags.NonPublic);
            foreach (TableCell cell in table.Rows[0].Cells)
                field.SetValue(cell, HtmlTextWriterTag.Th);
        }
        base.OnPreRender(e);
    }
}

然后例如你只需要使用它而不是基本控件：

protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack)
    {
        myGridView dg = new myGridView();
        dg.DataSource = new string[] { "1", "2", "3", "4", "5", "6" };
        dg.DataBind();

        ph.Controls.Add(dg);
    }
}

在aspx页面中，只需添加一个占位符，如：

<asp:PlaceHolder ID="ph" runat="server" />

full example in pastebin

Answer 2

请注意：这是VB.net对同一问题的回答，您可以使用任意数量的免费在线转换器将其转换为C＃。

使用thead＆amp;创建一个简单的HTML表格。 TBODY。我特别需要一个jQuery tablesorter插件的thead元素。

    Dim ta As Table
    Dim thr As TableHeaderRow
    Dim thc As TableHeaderCell
    Dim tr As TableRow
    Dim td As TableCell

    ta = New Table
    ' make a header row & explicitly place it into the header section
    thr = New TableHeaderRow
    thr.TableSection = TableRowSection.TableHeader
    ' add cells to header row
    thc = New TableHeaderCell
    thc.Text = "ID"
    thr.Cells.Add(thc)
    thc = New TableHeaderCell
    thc.Text = "DESC"
    thr.Cells.Add(thc)
    ' create a data row & append cells to it
    tr = New TableRow
    td = New TableCell
    td.Text = "101"
    tr.Cells.Add(td)
    td = New TableCell
    td.Text = "VB.net is not so bad."
    tr.Cells.Add(td)
    ' append the header & row to the table
    ta.Rows.Add(thr)
    ta.Rows.Add(tr)

    ' add the new table to your page
    Page.Controls.Add(ta)

Answer 3

我已经晚了一百万年，但我只需要做同样的事情。它的处理方式与网格视图大致相同。

        foreach (var item in dynamicData)
        {
            var c = new TableHeaderCell()
            c.Text = item.Whatever;
            hr.Cells.Add(c);
        }
        //This is the important line
        hr.TableSection = TableRowSection.TableHeader;

        MyTable.Rows.Add(hr);

Answer 4

我打算建议您尝试声明性语法，但我现在知道你的意思了;以下代码......：

<asp:Table runat="server" ID="sometable">
    <asp:TableHeaderRow BackColor="#ADD9E6">
        <asp:TableHeaderCell ID="DataHeader" CssClass="Heading1" Text="Data Header" />
    </asp:TableHeaderRow>
    <asp:TableRow>
        <asp:TableCell>Data</asp:TableCell>
    </asp:TableRow>
</asp:Table>

...与您发布的内容产生了类似的结果：

<table id="sometable" border="0">
<tr style="background-color:#ADD9E6;">
    <th id="DataHeader" class="Heading1">Data Header</th>
</tr><tr>
    <td>Data</td>
</tr>
</table>

也许可以创建自定义控件来解决您的问题？看起来像是矫枉过正，但至少你可以控制生成的输出是什么。

另一个选择是继承System.Web.UI.WebControls.Table类和override how the table is rendered。

Answer 5

如果在命名模板中的列时可以使用DataGrid，它将适当地生成thead和tbody。

Answer 6

将TableSection="TableHeader"添加到TableHeaderRow，如：

<asp:TableHeaderRow ID="TableHeaderRow2" 
 runat="server" TableSection="TableHeader" >

在asp：Table Control我们如何创建thead？

6 个答案: