我學習 jQuery 的第一本入門書是借自左新分館的 "精通JavaScript+jQuery" (曾順, 松崗, 2009), 雖然這本書已經是十年前的老書了, 但裡面的資料還蠻有參考價值 (例如 Ajax 與表格控制), 我前陣子複習 jQuery 時還是從左新再借回來看 :
最近要清理借書, 所以摘要整理一下重點, 並做些簡單測試後就還回去吧.
首先是表格, 關於 HTML5 表格相關元素參考下面這篇的第 9 節 :
以下僅測試該篇沒有的功能以及補足 jQuery 對表格的控制部分. 下面範例之數據取自 :
# 0050 會比 0056 好？揭密高股息ETF背後的「內扣費用」和「手續費」
表格元素 table 有一個 border 屬性可以設定整個表格之邊框寬度 (px), 此屬性作用範圍包含內部儲存格都在內, 例如 :
測試 1 : 基本的表格 (jQuery not used) : 使用 border 屬性 [看原始碼]
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta class="viewport" content="width=device-width,initial-scale=1">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
<table border="1">
<caption>元大 0050 與 0056 報酬率比較</caption>
<thead>
<tr>
<th></th>
<th>總報酬率</th>
<th>年化報酬率</th>
<th>內扣費用</th>
</tr>
</thead>
<tbody>
<tr>
<td>oo50</td>
<td>25.3%</td>
<td>2.8%</td>
<td>0.43%</td>
</tr>
<tr>
<td>0056</td>
<td>18.4%</td>
<td>2.1%</td>
<td>0.73%</td>
</tr>
</tbody>
</table>
</body>
</html>
結果如下 :
測試 2 : 基本的表格 (jQuery not used) : 使用 CSS 的 border 屬性 (1) [看原始碼]
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta class="viewport" content="width=device-width,initial-scale=1">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
<table style="border: 1px solid black;">
<caption>元大 0050 與 0056 比較</caption>
<thead>
<tr>
<th></th>
<th>總報酬率</th>
<th>年化報酬率</th>
<th>內扣費用</th>
</tr>
</thead>
<tbody>
<tr>
<td>oo50</td>
<td>25.3%</td>
<td>2.8%</td>
<td>0.43%</td>
</tr>
<tr>
<td>0056</td>
<td>18.4%</td>
<td>2.1%</td>
<td>0.73%</td>
</tr>
</tbody>
</table>
</body>
</html>
結果如下 :
可見 table 元素上的 border 樣式只能設定表格本身的外框而已, 並不包括內部儲存格. 如果要整個表格都有邊框, 則代表儲存格的 th 與 td 這兩個元素也要設定 border 樣式 :
<style>
table, th, td {border: 1px solid black;}
</style>
例如 :
測試 3 : 基本的表格 (jQuery not used) : 使用 CSS 的 border 屬性 (2) [看原始碼]
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta class="viewport" content="width=device-width,initial-scale=1">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<style>
table, th, td {border: 1px solid black;}
</style>
</head>
<body>
<table>
<caption>元大 0050 與 0056 比較</caption>
<thead>
<tr>
<th></th>
<th>總報酬率</th>
<th>年化報酬率</th>
<th>內扣費用</th>
</tr>
</thead>
<tbody>
<tr>
<td>oo50</td>
<td>25.3%</td>
<td>2.8%</td>
<td>0.43%</td>
</tr>
<tr>
<td>0056</td>
<td>18.4%</td>
<td>2.1%</td>
<td>0.73%</td>
</tr>
</tbody>
</table>
</body>
</html>
結果如下 (與上面測試 1 相同) :
如果表格外框需要其他樣式, 則必須與 th/td 分開設定, 例如 :
測試 4 : 基本的表格 (jQuery not used) : 使用 CSS 的 border 屬性 (3) [看原始碼]
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta class="viewport" content="width=device-width,initial-scale=1">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<style>
table {border: 5px solid #232eb6;}
th, td {border: 1px solid black;}
</style>
</head>
<body>
<table>
<caption>元大 0050 與 0056 比較</caption>
<thead>
<tr>
<th></th>
<th>總報酬率</th>
<th>年化報酬率</th>
<th>內扣費用</th>
</tr>
</thead>
<tbody>
<tr>
<td>oo50</td>
<td>25.3%</td>
<td>2.8%</td>
<td>0.43%</td>
</tr>
<tr>
<td>0056</td>
<td>18.4%</td>
<td>2.1%</td>
<td>0.73%</td>
</tr>
</tbody>
</table>
<script>
$(function(){
});
</script>
</body>
</html>
此例把 table 與 th/td 之樣式設定分離開來, 結果如下 :
不過這表格的儲存格之間預設會有空隙, 視覺觀感不佳, 消除儲存格空隙的方法是給 table 元素添加 border-collapse: collapse 屬性即可, 例如 :
測試 5 : 基本的表格 (jQuery not used) : 使用 CSS 的 border 屬性 (4) [看原始碼]
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta class="viewport" content="width=device-width,initial-scale=1">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<style>
table {border: 5px solid #232eb6;border-collapse:collapse;}
th, td {border: 1px solid black;}
</style>
</head>
<body>
<table>
<caption>元大 0050 與 0056 比較</caption>
<thead>
<tr>
<th></th>
<th>總報酬率</th>
<th>年化報酬率</th>
<th>內扣費用</th>
</tr>
</thead>
<tbody>
<tr>
<td>oo50</td>
<td>25.3%</td>
<td>2.8%</td>
<td>0.43%</td>
</tr>
<tr>
<td>0056</td>
<td>18.4%</td>
<td>2.1%</td>
<td>0.73%</td>
</tr>
</tbody>
</table>
</body>
</html>
結果如下 :
雖然儲存格間隙不見了, 但儲存格內容似乎前胸貼後壁黏在一起不好看, 解決方法是給 th/td 元素添加 padding 樣式屬性, 例如 :
測試 6 : 基本的表格 (jQuery not used) : 使用 CSS 的 padding 屬性 [看原始碼]
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta class="viewport" content="width=device-width,initial-scale=1">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<style>
table {border: 5px solid #232eb6;border-collapse:collapse;}
th, td {border: 1px solid black;padding:6px;}
</style>
</head>
<body>
<table>
<caption>元大 0050 與 0056 比較</caption>
<thead>
<tr>
<th></th>
<th>總報酬率</th>
<th>年化報酬率</th>
<th>內扣費用</th>
</tr>
</thead>
<tbody>
<tr>
<td>oo50</td>
<td>25.3%</td>
<td>2.8%</td>
<td>0.43%</td>
</tr>
<tr>
<td>0056</td>
<td>18.4%</td>
<td>2.1%</td>
<td>0.73%</td>
</tr>
</tbody>
</table>
</body>
</html>
此例結合 border-collapse 與 padding 樣式設定, 結果如下 :
其實 th 元素並非一定要放在 thead 內, 也可以放在 tboby 中, 例如要突出行與列的標題可以將每一列的第一行從 td 改為 th, 然後將 th 與 td 的樣式設定分離, 給 th 套上不同的 background-color 樣式屬性即可, 例如 :
測試 7 : 基本的表格 (jQuery not used) : 凸顯行與列標題的方法 [看原始碼]
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta class="viewport" content="width=device-width,initial-scale=1">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<style>
table {border: 5px solid #232eb6;border-collapse:collapse;}
th {border: 1px solid black;padding:6px;background-color:#E6CAFF;}
td {border: 1px solid black;padding:6px;}
</style>
</head>
<body>
<table>
<caption>元大 0050 與 0056 比較</caption>
<thead>
<tr>
<th></th>
<th>總報酬率</th>
<th>年化報酬率</th>
<th>內扣費用</th>
</tr>
</thead>
<tbody>
<tr>
<th>oo50</td>
<td>25.3%</td>
<td>2.8%</td>
<td>0.43%</td>
</tr>
<tr>
<th>0056</td>
<td>18.4%</td>
<td>2.1%</td>
<td>0.73%</td>
</tr>
</tbody>
</table>
</body>
</html>
此例將 td 與 th 的樣式分開, 並為 th 添加 background-color 樣式屬性, 然後把 tbody 中的第一行 td 元素改為 th, 結果如下 :
另外一個常用的表格 CSS 技巧是隔列變更背景色, 以下測試取材於下面這篇文章的數據 :
# 0056配息縮水！還可以繼續存嗎？投資達人建議先破解兩大迷思
測試 8 : 隔列交互變更背景色的表格 : 手動控制 CSS 樣式類別切換 [看原始碼]
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta class="viewport" content="width=device-width,initial-scale=1">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<style>
table {border: 1px solid #007108;
border-collapse: collapse;
background-color: #d9ffdc}
th {border: 1px solid #007108;
padding:6px;
background-color: #a16128;
color: white;}
td {border: 1px solid #007108; padding:6px;}
.altrow {background-color: #a5e5aa;}
</style>
</head>
<body>
<table>
<caption>0056 歷年配息與填息天數</caption>
<thead>
<tr>
<th>除息日</th>
<th>每股配發(元)</th>
<th>殖利率</th>
<th>填息日</th>
<th>填息天數</th>
</tr>
</thead>
<tbody>
<tr>
<td>2009/10/23</td>
<td>2</td>
<td>8.46%</td>
<td>2010/1/8</td>
<td>78</td>
</tr>
<tr class="altrow">
<td>2011/10/26</td>
<td>2.2</td>
<td>8.73%</td>
<td>2012/2/17</td>
<td>115</td>
</tr>
<tr>
<td>2012/10/24</td>
<td>1.3</td>
<td>5.33%</td>
<td>2013/5/9</td>
<td>198</td>
</tr>
<tr class="altrow">
<td>2013/10/23</td>
<td>0.85</td>
<td>3.52%</td>
<td>2014/4/16</td>
<td>176</td>
</tr>
<tr>
<td>2014/10/24</td>
<td>1</td>
<td>4.17%</td>
<td>2014/12/5</td>
<td>43</td>
</tr>
<tr class="altrow">
<td>2015/10/23</td>
<td>1</td>
<td>4.42%</td>
<td>2016/3/1</td>
<td>131</td>
</tr>
<tr>
<td>2016/10/26</td>
<td>1.3</td>
<td>5.13%</td>
<td>2017/6/21</td>
<td>239</td>
</tr>
<tr class="altrow">
<td>2017/10/30</td>
<td>0.95</td>
<td>3.6%</td>
<td>2018/1/23</td>
<td>86</td>
</tr>
<tr>
<td>2018/10/23</td>
<td>1.45</td>
<td>5.62%</td>
<td>2019/2/21</td>
<td>122</td>
</tr>
<tr class="altrow">
<td>2019/10/23</td>
<td>1.8</td>
<td>6.2%</td>
<td>2019/12/30</td>
<td>69</td>
</tr>
<tr>
<td>2020/10/28</td>
<td>1.6</td>
<td>5.34%</td>
<td>?</td>
<td>?</td>
</tr>
<tr>
<td colspan="2">平均年度殖利率</td>
<td>5.43%</td>
<td>平均填息天數</td>
<td>125.7</td>
</tr>
</tbody>
</table>
</body>
</html>
此例主要是定義了一個名為 altrow 的樣式類別用來套在特定列的 tr 員數, 功能是改變其背景顏色為 #a5e5aa, 而未套用此類別者就套用 table 元素的背景色 #d9ffdc, 結果如下 :
此方法的明顯缺點是必須在特定列套用特定樣式類別, 若中間插入新的列勢必要重新設定. 解決辦法是使用 jQuery 來控制, 例如 :
測試 9 : 隔列交互變更背景色的表格 : 使用 jQuery 自動控制樣式類別切換 (1) [看原始碼]
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta class="viewport" content="width=device-width,initial-scale=1">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<style>
table {border: 1px solid #007108;
border-collapse: collapse;
background-color: #d9ffdc}
th {border: 1px solid #007108;
padding:6px;
background-color: #a16128;
color: white;}
td {border: 1px solid #007108; padding:6px;}
.altrow {background-color: #a5e5aa;}
</style>
</head>
<body>
<table>
<caption>0056 歷年配息與填息天數</caption>
<thead>
<tr>
<th>除息日</th>
<th>每股配發(元)</th>
<th>殖利率</th>
<th>填息日</th>
<th>填息天數</th>
</tr>
</thead>
<tbody>
<tr>
<td>2009/10/23</td>
<td>2</td>
<td>8.46%</td>
<td>2010/1/8</td>
<td>78</td>
</tr>
<tr>
<td>2011/10/26</td>
<td>2.2</td>
<td>8.73%</td>
<td>2012/2/17</td>
<td>115</td>
</tr>
<tr>
<td>2012/10/24</td>
<td>1.3</td>
<td>5.33%</td>
<td>2013/5/9</td>
<td>198</td>
</tr>
<tr>
<td>2013/10/23</td>
<td>0.85</td>
<td>3.52%</td>
<td>2014/4/16</td>
<td>176</td>
</tr>
<tr>
<td>2014/10/24</td>
<td>1</td>
<td>4.17%</td>
<td>2014/12/5</td>
<td>43</td>
</tr>
<tr>
<td>2015/10/23</td>
<td>1</td>
<td>4.42%</td>
<td>2016/3/1</td>
<td>131</td>
</tr>
<tr>
<td>2016/10/26</td>
<td>1.3</td>
<td>5.13%</td>
<td>2017/6/21</td>
<td>239</td>
</tr>
<tr>
<td>2017/10/30</td>
<td>0.95</td>
<td>3.6%</td>
<td>2018/1/23</td>
<td>86</td>
</tr>
<tr>
<td>2018/10/23</td>
<td>1.45</td>
<td>5.62%</td>
<td>2019/2/21</td>
<td>122</td>
</tr>
<tr>
<td>2019/10/23</td>
<td>1.8</td>
<td>6.2%</td>
<td>2019/12/30</td>
<td>69</td>
</tr>
<tr>
<td>2020/10/28</td>
<td>1.6</td>
<td>5.34%</td>
<td>?</td>
<td>?</td>
</tr>
<tr>
<td colspan="2">平均年度殖利率</td>
<td>5.43%</td>
<td>平均填息天數</td>
<td>125.7</td>
</tr>
</tbody>
</table>
<script>
$(function(){
$("tr:nth-child(even)").addClass("altrow");
});
</script>
</body>
</html>
此例使用 jQuery 選擇器 tr:nth-child(even) 選取偶數列, 然後呼叫 addClass() 方法添加樣式類別 altrow, 不須在特定列 tr 元素上手動添加樣式類別, 結果與上面一樣 :
下面範例則是使用 toggleClass() 方法在滑鼠移入與移出時添加與移除樣式類別 :
測試 10 : 隔列交互變更背景色的表格 : 滑鼠移入移出切換樣式類別 [看原始碼]
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta class="viewport" content="width=device-width,initial-scale=1">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<style>
table {border: 1px solid #007108;
border-collapse: collapse;
background-color: #d9ffdc}
th {border: 1px solid #007108;
padding:6px;
background-color: #a16128;
color: white;}
td {border: 1px solid #007108; padding:6px;}
.altrow {background-color: #a5e5aa;}
</style>
</head>
<body>
<table>
<caption>0056 歷年配息與填息天數</caption>
<thead>
<tr>
<th>除息日</th>
<th>每股配發(元)</th>
<th>殖利率</th>
<th>填息日</th>
<th>填息天數</th>
</tr>
</thead>
<tbody>
<tr>
<td>2009/10/23</td>
<td>2</td>
<td>8.46%</td>
<td>2010/1/8</td>
<td>78</td>
</tr>
<tr>
<td>2011/10/26</td>
<td>2.2</td>
<td>8.73%</td>
<td>2012/2/17</td>
<td>115</td>
</tr>
<tr>
<td>2012/10/24</td>
<td>1.3</td>
<td>5.33%</td>
<td>2013/5/9</td>
<td>198</td>
</tr>
<tr>
<td>2013/10/23</td>
<td>0.85</td>
<td>3.52%</td>
<td>2014/4/16</td>
<td>176</td>
</tr>
<tr>
<td>2014/10/24</td>
<td>1</td>
<td>4.17%</td>
<td>2014/12/5</td>
<td>43</td>
</tr>
<tr>
<td>2015/10/23</td>
<td>1</td>
<td>4.42%</td>
<td>2016/3/1</td>
<td>131</td>
</tr>
<tr>
<td>2016/10/26</td>
<td>1.3</td>
<td>5.13%</td>
<td>2017/6/21</td>
<td>239</td>
</tr>
<tr>
<td>2017/10/30</td>
<td>0.95</td>
<td>3.6%</td>
<td>2018/1/23</td>
<td>86</td>
</tr>
<tr>
<td>2018/10/23</td>
<td>1.45</td>
<td>5.62%</td>
<td>2019/2/21</td>
<td>122</td>
</tr>
<tr>
<td>2019/10/23</td>
<td>1.8</td>
<td>6.2%</td>
<td>2019/12/30</td>
<td>69</td>
</tr>
<tr>
<td>2020/10/28</td>
<td>1.6</td>
<td>5.34%</td>
<td>?</td>
<td>?</td>
</tr>
<tr>
<td colspan="2">平均年度殖利率</td>
<td>5.43%</td>
<td>平均填息天數</td>
<td>125.7</td>
</tr>
</tbody>
</table>
<script>
$(function(){
$("tr:nth-child(even)").addClass("altrow");
$("table").on("mouseover", function(){
$("tr:gt(0)").toggleClass("altrow");
});
$("table").on("mouseout", function(){
$("tr:gt(0)").toggleClass("altrow");
});
});
</script>
</body>
</html>
此例在 table 元素上綁定 mouseover 與 mouseout 事件, 當滑鼠移入或移出表格時呼叫 toggleClass() 來切換大於 0 的列的樣式類別, 結果如下 :
下面這個範例則是用 hover 事件讓滑鼠移到某列時添加樣式類別使其凸顯 :
測試 11 : 隔列交互變更背景色的表格 : 滑鼠移入移出切換樣式類別 (1) [看原始碼]
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta class="viewport" content="width=device-width,initial-scale=1">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<style>
table {border: 1px solid #007108;
border-collapse: collapse;
background-color: #d9ffdc}
th {border: 1px solid #007108;
padding:6px;
background-color: #a16128;
color: white;}
td {border: 1px solid #007108; padding:6px;}
.altrow {background-color: #a5e5aa;}
.highlight {background-color: yellow;}
</style>
</head>
<body>
<table>
<caption>0056 歷年配息與填息天數</caption>
<thead>
<tr>
<th>除息日</th>
<th>每股配發(元)</th>
<th>殖利率</th>
<th>填息日</th>
<th>填息天數</th>
</tr>
</thead>
<tbody>
<tr>
<td>2009/10/23</td>
<td>2</td>
<td>8.46%</td>
<td>2010/1/8</td>
<td>78</td>
</tr>
<tr>
<td>2011/10/26</td>
<td>2.2</td>
<td>8.73%</td>
<td>2012/2/17</td>
<td>115</td>
</tr>
<tr>
<td>2012/10/24</td>
<td>1.3</td>
<td>5.33%</td>
<td>2013/5/9</td>
<td>198</td>
</tr>
<tr>
<td>2013/10/23</td>
<td>0.85</td>
<td>3.52%</td>
<td>2014/4/16</td>
<td>176</td>
</tr>
<tr>
<td>2014/10/24</td>
<td>1</td>
<td>4.17%</td>
<td>2014/12/5</td>
<td>43</td>
</tr>
<tr>
<td>2015/10/23</td>
<td>1</td>
<td>4.42%</td>
<td>2016/3/1</td>
<td>131</td>
</tr>
<tr>
<td>2016/10/26</td>
<td>1.3</td>
<td>5.13%</td>
<td>2017/6/21</td>
<td>239</td>
</tr>
<tr>
<td>2017/10/30</td>
<td>0.95</td>
<td>3.6%</td>
<td>2018/1/23</td>
<td>86</td>
</tr>
<tr>
<td>2018/10/23</td>
<td>1.45</td>
<td>5.62%</td>
<td>2019/2/21</td>
<td>122</td>
</tr>
<tr>
<td>2019/10/23</td>
<td>1.8</td>
<td>6.2%</td>
<td>2019/12/30</td>
<td>69</td>
</tr>
<tr>
<td>2020/10/28</td>
<td>1.6</td>
<td>5.34%</td>
<td>?</td>
<td>?</td>
</tr>
<tr>
<td colspan="2">平均年度殖利率</td>
<td>5.43%</td>
<td>平均填息天數</td>
<td>125.7</td>
</tr>
</tbody>
</table>
<script>
$(function(){
$("tr:nth-child(even)").addClass("altrow");
$("tr").hover(function(){
$(this).toggleClass("highlight");
});
});
</script>
</body>
</html>
此列定義了一個 highlight 樣式類別, 當滑鼠移過表格某列時呼叫 toggleClass() 方法切換為 highlight 樣式, 移出後切換回原來樣式, 結果如下 :
這本書的範例中還有一個表格配色我覺得很順眼, 藍色系的感覺很沉穩 :
測試 12 : 隔列交互變更背景色的表格 : 滑鼠移入移出切換樣式類別 (2) [看原始碼]
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta class="viewport" content="width=device-width,initial-scale=1">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<style>
table {border: 1px solid #0058a3;
border-collapse: collapse;
background-color: #eaf5ff}
th {border: 1px solid #0058a3;
padding:6px;
background-color: #4bacff;
color: #ffffff;}
td {border: 1px solid #0058a3; padding:6px;}
.altrow {background-color: #c4e4ff;}
.highlight {background-color: yellow;}
</style>
</head>
<body>
<table>
<caption>0056 歷年配息與填息天數</caption>
<thead>
<tr>
<th>除息日</th>
<th>每股配發(元)</th>
<th>殖利率</th>
<th>填息日</th>
<th>填息天數</th>
</tr>
</thead>
<tbody>
<tr>
<td>2009/10/23</td>
<td>2</td>
<td>8.46%</td>
<td>2010/1/8</td>
<td>78</td>
</tr>
<tr>
<td>2011/10/26</td>
<td>2.2</td>
<td>8.73%</td>
<td>2012/2/17</td>
<td>115</td>
</tr>
<tr>
<td>2012/10/24</td>
<td>1.3</td>
<td>5.33%</td>
<td>2013/5/9</td>
<td>198</td>
</tr>
<tr>
<td>2013/10/23</td>
<td>0.85</td>
<td>3.52%</td>
<td>2014/4/16</td>
<td>176</td>
</tr>
<tr>
<td>2014/10/24</td>
<td>1</td>
<td>4.17%</td>
<td>2014/12/5</td>
<td>43</td>
</tr>
<tr>
<td>2015/10/23</td>
<td>1</td>
<td>4.42%</td>
<td>2016/3/1</td>
<td>131</td>
</tr>
<tr>
<td>2016/10/26</td>
<td>1.3</td>
<td>5.13%</td>
<td>2017/6/21</td>
<td>239</td>
</tr>
<tr>
<td>2017/10/30</td>
<td>0.95</td>
<td>3.6%</td>
<td>2018/1/23</td>
<td>86</td>
</tr>
<tr>
<td>2018/10/23</td>
<td>1.45</td>
<td>5.62%</td>
<td>2019/2/21</td>
<td>122</td>
</tr>
<tr>
<td>2019/10/23</td>
<td>1.8</td>
<td>6.2%</td>
<td>2019/12/30</td>
<td>69</td>
</tr>
<tr>
<td>2020/10/28</td>
<td>1.6</td>
<td>5.34%</td>
<td>?</td>
<td>?</td>
</tr>
<tr>
<td colspan="2">平均年度殖利率</td>
<td>5.43%</td>
<td>平均填息天數</td>
<td>125.7</td>
</tr>
</tbody>
</table>
<script>
$(function(){
$("tr:nth-child(even)").addClass("altrow");
$("tr").hover(function(){
$(this).toggleClass("highlight");
});
});
</script>
</body>
</html>
與上例主要的差異是 : 表格與儲存格邊框改為 #0058a3; 表格背景色改為 #eaf5ff; 標頭背景色改為 #4bacff; 樣式類別 altrow 背景色改為 #c4e4ff, 結果如下 :
將將, 完成了!
沒有留言:
張貼留言