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