2020年11月7日 星期六

jQuery 學習筆記 : 表格控制

我學習 jQuery 的第一本入門書是借自左新分館的 "精通JavaScript+jQuery" (曾順, 松崗, 2009), 雖然這本書已經是十年前的老書了, 但裡面的資料還蠻有參考價值 (例如 Ajax 與表格控制), 我前陣子複習 jQuery 時還是從左新再借回來看 :

 


最近要清理借書, 所以摘要整理一下重點, 並做些簡單測試後就還回去吧. 

首先是表格, 關於 HTML5 表格相關元素參考下面這篇的第 9 節 :

網頁技術速學筆記 (一) : HTML 基礎

以下僅測試該篇沒有的功能以及補足 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>

結果如下 : 


可見一個 border 屬性就搞定整張表格與內部儲存格的邊框. 如果改用 CSS 來設定, 要注意的是, table 元素本身的 CSS 屬性 border 只作用於表格自己, 也就是只規範外框, 例如 : 


測試 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 事件讓滑鼠移到某列時添加樣式類別使其凸顯 :



<!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 樣式, 移出後切換回原來樣式, 結果如下 :




這本書的範例中還有一個表格配色我覺得很順眼, 藍色系的感覺很沉穩 :



<!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, 結果如下 : 




將將, 完成了! 

沒有留言:

張貼留言