2015年5月17日星期日

HTML Table 行及列改變背景顏色

在網頁上使用 table 來展示資料經常發生
有時為了讓展示的資料,會將 行及列 的背景顏色,讓使用者較易查看

在下使用好簡單的 Javascript 及 HTML 來達到效果
function setHighlight(td, index, color){
    var tr = td.parentNode;
    var table = tr.parentNode;
    if (!(table instanceof HTMLTableElement)){
        table = table.parentNode;
    }
    var cols = table.getElementsByTagName('col');
    cols[index].style.backgroundColor = color;
    tr.style.backgroundColor = color;
}
<table border="1">
    <col width="100"/>
    <col width="100"/>
    <col width="100"/>
    <col width="100"/>
    <col width="100"/>
    <thead>
        <tr>
            <th></th>
            <th>列1</th>
            <th>列2</th>
            <th>列3</th>
            <th>列4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>行1</th>
            <td onmouseover="setHighlight(this, 1, '#ffff88');" onmouseout="setHighlight(this, 1, null);">11</td>
            <td onmouseover="setHighlight(this, 2, '#ffff88');" onmouseout="setHighlight(this, 2, null);">12</td>
            <td onmouseover="setHighlight(this, 3, '#ffff88');" onmouseout="setHighlight(this, 3, null);">13</td>
            <td onmouseover="setHighlight(this, 4, '#ffff88');" onmouseout="setHighlight(this, 4, null);" rowspan="2">14</td>
        </tr>
        <tr>
            <th>行2</th>
            <td onmouseover="setHighlight(this, 1, '#ffff88');" onmouseout="setHighlight(this, 1, null);" colspan="2">21</td>
            <td onmouseover="setHighlight(this, 3, '#ffff88');" onmouseout="setHighlight(this, 3, null);">23</td>
        </tr>
        <tr>
            <th>行3</th>
            <td onmouseover="setHighlight(this, 1, '#ffff88');" onmouseout="setHighlight(this, 1, null);">31</td>
            <td onmouseover="setHighlight(this, 2, '#ffff88');" onmouseout="setHighlight(this, 2, null);">32</td>
            <td onmouseover="setHighlight(this, 3, '#ffff88');" onmouseout="setHighlight(this, 3, null);" rowspan="2" colspan="2">33</td>
        </tr>
        <tr>
            <th>行4</th>
            <td onmouseover="setHighlight(this, 1, '#ffff88');" onmouseout="setHighlight(this, 1, null);">41</td>
            <td onmouseover="setHighlight(this, 2, '#ffff88');" onmouseout="setHighlight(this, 2, null);">42</td>
        </tr>
    </tbody>
</table>


列1 列2 列3 列4
行1 11 12 13 14
行2 21 23
行3 31 32 33
行4 41 42

但這種方法當 tr 或 td 已經設定 背景顏色 由於 col 與 tr 或 td 沒有父或子項目關係,背景顏色則不能覆蓋
而 td 比 tr 優先,因此 tr 不能覆蓋 td 的背景顏色
列1 列2 列3 列4
行1 11 12 13 14
行2 21 23
行3 31 32 33
行4 41 42

沒有留言 :

發佈留言