切版挑戰：Table 的實戰

本次的挑戰主要有兩個項目

廣告被選擇時的樣式

當廣告被選擇時，也就是第一欄的 checkbox 被勾選的時候，該 table row 的樣式會有所改變，整行轉為醒目的橘色底色以利辨識

固定 table header

當表單資訊向下滑動時，table header 是固定置頂的，讓使用者可以清楚知道每一個欄位代表什麼資訊。

你完成了什麼？花了多少時間？為什麼會做這些事？

在碰到題目的時候會先思考有什麼樣的解決方式，本次挑戰的題目解決方式有許多種，上網查詢資料過程中也不難發現解決方式，但是該如何應用在項目上又是一個問題。

本次共花費約 2 小時，包含搜尋資料與實作

在 header 置頂的部分，我選擇直接修改 css 的 thead, tbody ，在 tbody 加入高度以及 overflow: auto 的功能，即能完成 header 是固定置頂的，這個方式是最為簡單與理解的，且操作上也沒有什麼問題。

在廣告被選擇時的部分，最直覺就是使用 Javascript，綁監聽器，監聽 table__row — checked， css 裡新增 checked 後的樣式即可完成，順帶一提，因為勾選而顯示顏色是為了方便使用者使用，那麼我便多新增了一個功能，讓使用者滑鼠移過時能有淺灰色背景顯示，更方便閱讀，另外要注意的是，header 也在 row — checked:hover 裡，所以額外把 header 的 hover 一起加入，讓 header 被選到時不會變色。

碰到什麼困難？如何解決？

廣告被選擇時變色的功能

原本在思考是否能直接修改 css 或 html 來改變，但是考慮到 css 選擇器無法像 Javascript 一樣選擇到父層，所以還是使用了 Javascript，直接綁定監聽器來操作。

回頭檢視流程與成果時，哪些部分你覺得可能有改善的空間？

也許可以多嘗試不同的做法，但依使用習慣來說大部分的人還是想找最簡單有效率的方法，原本操作 header 的部分試過很多不同的方法，但是都很繁雜，後來找到方法直接修改 thead tbody 以後，瞬間豁然開朗！

也許在碰到事情的時候，多方思考與積極尋找答案是很好的，也許會有不同收穫！