解決したいこと動的に作成するテーブルのヘッダータグ<thead>にIDを<thead id="tablehead">のように付与したい発生している問題・エラー ...

@rin-bamboo (Rin Bamboo)posted at 2024-03-30

ASP.NET WebFormのテーブル<thead>にIDをつけたい

Q&A

Closed

VB.Net ASP.NET WebForm

解決したいこと

動的に作成するテーブルのヘッダータグ<thead>にIDを<thead id="tablehead">のように付与したい

発生している問題・エラー

    Dim tableHeaderCell As New TableHeaderCell()
    Dim tableHeaderRow As New TableHeaderRow()

    tableHeaderRow.TableSection = TableRowSection.TableHeader
    tableHeaderRow.ID = "tablehead"

    tableHeaderCell = New TableHeaderCell With{
        .Text = "ヘッダー"
    }
    tableHeaderRow.Cells.Add(tableHeaderCell)

    table.Rows.Add(tableHeaderRow)

上記ようにヘッダーの追加を行いテーブルにヘッダー自体は追加できていますが、ID="tablehead"が<thead>に付与されず、下記のように td へidが付与されている状態です。

    <table>
        <thead>
            <td id="tablehead">
                <th>ヘッダー</th>
                ・・・

自分で試したこと

いろいろと調べてはみたのですが、良い記事が見当たらず質問させていただきました。

環境

.NET Framework 4.8

1Answer

@SurferOnWww posted at 2024-03-30

Table コントロールでは無理っぽいです。裏ワザ（クライアントスクリプトを使うとか）で何とかする方法はあるのかもしれませんが・・・

Repeater や ListView を使わない理由があるのですか？（Repeater や ListView でできるかどうかまでは検証してませんが可能性はありそうです）

そのまえに、そもそも thead に id 属性をつけたいという理由・目的は何なのですか？　他の方法でその目的を果たすことを考えた方が良さそうな気がします。

【追記】

Repeater・ListViewの存在をそもそも認識していなかったので少し調べてみます。

DB のテーブルなどのデータを表示したいのであれば ASP.NET 3.5 から使えるようになった ListView を使うことをお勧めします。

上に「Repeater や ListView でできるかどうかまでは検証してません」と書きましたが、ListView では可能なことは検証しました。

Visual Studio のデザイナを使ってコードを自動生成させると aspx に LayoutTemplate が生成されますが、下の画像のように thead 要素を追記し、親の table 要素の runat="server" を削除すれば OK です。

結果の html は以下のようになります。

1Like

Comments

@rin-bamboo
Questioner
回答ありがとうございます！
なるほど。Tableコントロールからは厳しいのですね。

Repeater・ListViewの存在をそもそも認識していなかったので少し調べてみます。

idをつけたい目的としては、
テーブルコンテンツが画面の上部に来たらテーブルのヘッダーを固定させレコードのみをスクロールさせるといったことをさせたく、Tableで実現できないかを調べていました。
ありがとうございます！
@SurferOnWww

idをつけたい目的としては、テーブルコンテンツが画面の上部に来たらテーブルのヘッダーを固定させレコードのみをスクロールさせるといったことをさせたく

それなら thead に id をつけなくてもできるはずです。「html table header 固定」などをキーワードにググってみてください、参考になる記事が多数ヒットするはずです。
@rin-bamboo
Questioner
ありがとうございます！
調べたものが thead にIDを入れたものだったので質問させていただいていました。

もう少し調べてみます。
@SurferOnWww

調べたものが thead にIDを入れたもの

どうしても「thead にIDを入れたもの」にしたいのであれば ListView を使うことをお勧めします。後で上の回答欄に例を追記しておきます。
@rin-bamboo
Questioner
ありがとうございます！
現在作成しているサイトのすべてのページをTableコントロールで作成してしまっているため、ListViewへの変換をかけながら勉強してみます！

検証等ありがとうございます！！
@SurferOnWww

現在作成しているサイトのすべてのページをTableコントロールで作成してしまっているため

なぜそういう方向に進んだのか不思議です。

もし、DB のテーブルを表示して、それをユーザーが編集し、編集結果を DB に反映するということをするのであれば、「Tableコントロールで作成」というのは ASP.NET Web Forms ではあり得ません。

編集などは不要で、単純に table に表示できればいいということでも「Tableコントロールで作成」というのはあり得ません。
@rin-bamboo
Questioner
なるほど。そもそもTableコントロールを使うのは望ましくないのですね。

調べるとTableコントロールを使って表を作成するのが出てきたためそれに沿って作成をしておりました。(多分私の検索が良くなかったのですね)

HTMLの知識の中で表を作成するにはtableタグを使用するので直感的に触りやすかったTableコントロールを使用しておりました。

ご指摘ありがとうございます！

Are you sure you want to delete the question?