Repeater 隔行換色與滑鼠懸停變色完整實作

純前端 CSS 方案（現代瀏覽器推薦）

現代專案首選純 CSS，無需 JavaScript，效能最佳：

<style>
.repeater-table tr:nth-child(even) { background-color: #fcf3f4; }
.repeater-table tr:nth-child(odd)  { background-color: #ffffff; }
.repeater-table tr:hover { background-color: #b9bace; }
</style>

<asp:Repeater ID="rptData" runat="server">
    <HeaderTemplate><table class="repeater-table"></HeaderTemplate>
    <ItemTemplate>
        <tr><td><%# Eval("Name") %></td></tr>
    </ItemTemplate>
    <FooterTemplate></table></FooterTemplate>
</asp:Repeater>

傳統 JavaScript 方案（相容舊版 IE）

若需支援 IE8 以下，可採用原文的隱藏欄位暫存原色方案：

<tr class="list_L01" 
    style='background-color: <%# (Container.ItemIndex % 2 == 0) ? "#FFFFFF" : "#fcf3f4" %>'
    onmouseover="changeColorOver(this)" 
    onmouseout="changeColorOut(this)">
    <td><%# Eval("Name") %></td>
</tr>

<input type="hidden" id="colorStore" />
<script>
function changeColorOver(el) {
    document.getElementById('colorStore').value = el.style.backgroundColor;
    el.style.backgroundColor = '#b9bace';
}
function changeColorOut(el) {
    el.style.backgroundColor = document.getElementById('colorStore').value;
}
</script>

進階：伺服器端控制樣式

在 ItemDataBound 事件動態加入 CSS 類別，邏輯集中於後端：

protected void rpt_ItemDataBound(object sender, RepeaterItemEventArgs e) {
    if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem) {
        var row = (HtmlTableRow)e.Item.FindControl("trRow");
        row.Attributes["class"] = e.Item.ItemIndex % 2 == 0 ? "even-row" : "odd-row";
        row.Attributes["onmouseover"] = "this.className+=' hover-row';";
        row.Attributes["onmouseout"] = "this.className=this.className.replace(' hover-row','');";
    }
}

最佳實踐總結

• 新專案優先使用 CSS :nth-child + :hover
• 舊專案維護可沿用 JS 方案，但建議漸進式遷移至 CSS
• 避免在 style 屬性硬編碼顏色，改用 CSS 類別便於維護
• 大量資料時，考慮虛擬滾動或分頁，減少 DOM 節點