ASP.NET Repeater 整列點選高亮：jQuery 實現單列選取視覺回饋

Repeater 結構與 ClientID 設計

為了讓每列 <tr> 擁有唯一且可預測的 ID，在 HeaderTemplate 與 ItemTemplate 中明確指定 id 屬性：

<asp:Repeater ID="rptStudent" runat="server">
    <HeaderTemplate>
        <table id="tblStudent">
            <tr id="trHeader">
                <th>姓名</th><th>學號</th><th>成績</th>
            </tr>
    </HeaderTemplate>
    <ItemTemplate>
        <tr id='tr_<%# Container.ItemIndex %>' class="data-row">
            <td><%# Eval("Sname") %></td>
            <td><%# Eval("SID") %></td>
            <td><%# Eval("Sscore") %></td>
        </tr>
    </ItemTemplate>
    <FooterTemplate>
        </table>
    </FooterTemplate>
</asp:Repeater>

• Container.ItemIndex 從 0 開始，產生 tr_0, tr_1... 唯一 ID。
• 共用 class="data-row" 方便 jQuery 群組選取。

jQuery 點選切換高亮

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function () {
    // 事件委派：針對動態新增列也生效
    $('#tblStudent').on('click', '.data-row', function () {
        var $row = $(this);
        // 切換高亮類別
        $row.toggleClass('highlight');
    });
});
</script>

<style>
    .data-row { cursor: pointer; transition: background-color 0.2s; }
    .data-row:hover { background-color: #f5f5f5; }
    .data-row.highlight { background-color: #ffeb3b !important; font-weight: bold; }
</style>

進階：單選模式（Radio 效果）

$('#tblStudent').on('click', '.data-row', function () {
    $(this).addClass('highlight').siblings('.data-row').removeClass('highlight');
});

取得選中列的資料（後端或前端）

前端取值

var selected = $('#tblStudent .data-row.highlight');
if (selected.length) {
    var name = selected.find('td:eq(0)').text();
    var id = selected.find('td:eq(1)').text();
    console.log('選中：', name, id);
}

後端配合 HiddenField 回傳

<asp:HiddenField ID="hfSelectedIndex" runat="server" />

<script>
$('#tblStudent').on('click', '.data-row', function () {
    var idx = $(this).attr('id').split('_')[1]; // tr_3 -> 3
    $('#<%= hfSelectedIndex.ClientID %>').val(idx);
    // 視覺回饋...
});
</script>

// 後端按鈕事件
protected void BtnProcess_Click(object sender, EventArgs e)
{
    if (int.TryParse(hfSelectedIndex.Value, out int idx))
    {
        var item = rptStudent.Items[idx];
        var lblName = item.FindControl("lblName") as Label; // 需在 ItemTemplate 給 Label ID
        // 執行業務...
    }
}

注意事項

1. ClientIDMode：ASP.NET 4.0+ 設定 ClientIDMode="Static" 或 Predictable 可控制 ID 產生規則。
2. PostBack 後高亮消失：需在 Page_Load 依 hfSelectedIndex 重新註冊啟動腳本，或改用 UpdatePanel 區域更新。
3. 無障礙：加入 tabindex="0"、role="row"、aria-selected 支援鍵盤操作。

總結

透過 Container.ItemIndex 產生唯一列 ID，配合 jQuery 事件委派與 CSS 類別切換，即可輕鬆實現 Repeater 整列點選高亮。此做法不修改資料繫結邏輯、前後端分離清晰，適合快速增強 GridView/Repeater 互動體驗。