切版挑戰：完成廣告系統

https://codepen.io/ezcomenezgo/pen/XWjQpma?editors=1010

這個專案完成了固定表格的表頭以及廣告列被選擇時的底色改變，還有選表頭的checkbox時能夠一次選擇所有列，總共花了4.5小時左右。

一開始先從固定Table Header開始，想要試著用position: fixed和爬文爬到的position: sticky來實作，但是後來發現一直破版，最後就先放棄去想廣告時被選擇的樣式。思考要如何讓全部的checkbox被check花了不能少時間，後來去翻了學期2–1的教案才想起來。本來嘗試用for迴圈選出被打勾的列加上classList.add去改變顏色，結果發現只有第一列能夠被改成功，最後去觀摩了一下同學寫的code才發現直接選取整張表格再透過event.target.parentElement去更改event.target那一列的顏色是比較適合的方法。

接下來回來實作固定表頭的部分，因為放棄了用position方法，於是上網google看看找不找的到解決方式，翻到stack overflow的這篇文章， 把theader跟tbody設定成display: block以及固定tbody的高度，竟然很簡單的就完成了這個功能。

最後參考PJ助教的這篇文章，嘗試用jQuery作出全選的功能，但是卡在不知道如何在全選的時候改變底色，不過就在我打到這一行的時候我突然想到解法了。原本很執著於要像上面那樣選到該列才能更改顏色，所以想要一次選到全部的列，但是選到的是HTMLcollection物件沒辦法更改HTML內容，剛剛突然想到只要選到tbody就是單獨選到該HTML標籤，即可更改全部的顏色。

最後在回顧作品的時候，對於表格部分應該可以用迴圈的方式印在HTML的data-panel裡面，不用一次貼很多個重複的HTML語法。預計等課程上完的總review時回來改善這個部分。