HTML Table 行及列改變背景顏色

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

在下使用好簡單的 Javascript 及 HTML 來達到效果

?

1 2 3 4 5 6 7 8 9 10

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; }

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

<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