ASP.NET ListView 交替列背景色與 JavaScript 全選變色實作

一、伺服端單行語法 (Inline Code)

<tr style='<%# (Container.DisplayIndex % 2 == 0) ? "background-color:white;" : "background-color:#EEEEEE;" %>'>

Container.DisplayIndex 為資料項索引 (0-based)，奇偶判斷套用不同背景色。

二、客戶端 JavaScript 處理全頁 <tr> 交替色

方案 A：綁定 checkbox 事件

<script>
function tr_bgcolor(chk) {
    var tr = chk.parentNode.parentNode;
    tr.rowIndex % 2 === 0
        ? tr.style.backgroundColor = chk.checked ? '#add6a6' : '#eee'
        : tr.style.backgroundColor = chk.checked ? '#add6d6' : '';
}
function selall(chk) {
    var inputs = chk.form.elements;
    for (var i = 0; i < inputs.length; i++) {
        if (inputs[i].type === 'checkbox' && inputs[i] !== chk) {
            inputs[i].checked = chk.checked;
            tr_bgcolor(inputs[i]);
        }
    }
}
</script>

方案 B：CSS 類別切換 (推薦)

<style>
#grid td { border:1px solid #ccc; padding:4px; text-align:center; }
.tr1 { background:#eee; color:red; }
.tr2 { background:#ccc; color:blue; }
</style>
<script>
function colorRows(tableId) {
    var rows = document.getElementById(tableId).rows;
    for (var i = 0; i < rows.length; i++)
        rows[i].className = i % 2 ? "tr1" : "tr2";
}
</script>
<body onload="colorRows('grid')">
<table id="grid">...</table>

三、總結

• 伺服端內嵌運算式最簡潔，適用 ListView/Repeater 等資料繫結控制項。
• 客戶端 JS 適合靜態表格或需動態互動 (如全選變色) 的情境。
• CSS 類別切換比直接設定 style.backgroundColor 更易維護。