「廣告系統」延伸功能＆完成細節

情境：資深工程師先啟動專案，把專案架構與技術規格等先定下來，我要來協助將以下三個細節完成！

1. 廣告被選擇時變成橘底

花費時間：18分鐘

實作以下項目：

(1) 在 CSS 新增一個 .checked 選擇器：

.checked {
  background: var(--checked-color);
}

(2) 在 JavaScript 中設計出當使用者點擊廣告這個時，能夠操縱被選到的這一列：

const tableBody = document.querySelector(".table__body")

(3) 為了在點擊之後會有所反應，在 JavaScript 中 bind event：

tableBody.addEventListener("change", cellChecked)

(4) cellChecked 函式標記出 checked。
因為用 toggle，再點一次會移除 checked 標記：

const cellChecked = event => {
  const parent = event.target.parentElement;
  parent.parentElement.classList.toggle("checked")
}

2. 固定 table header

上下滾動時標題那一列不會跟著移動。

花費時間：85分鐘

花了40分鐘研究 position 的方法，嘗試失敗。
覺得花太多時間，後面45分鐘在轉換方向和研究 網站 看到靈感。
開始研究用 overflow 實作的方向，也是最後使用的方法。

其中遇到給定的寬高沒有作用，花了一些時間研究。
最後發現是因為 table 的 <tbody>預設 display 是 table-row-group，還有 <thead>預設 display 是 table-header-group，所以沒辦法指定高度。
要將 display 改成 block。

在 CSS 新增以下：

.table__header { 
  display: block;
}
.table__body { 
  display: block;
  height: 648px;
  overflow: auto;
}

3. 斑馬紋背景

花費時間：6分鐘

前六分鐘在 CSS 新增以下：

.table__body .table__row:nth-child(even) {
  background: var(--zebra-color);
}

但完成後自己操作檢查測試時，發現會讓前面設定的 .checked 沒辦法覆蓋橘底色。

發現是跟選擇器優先順序有關，到這個網站驗證優先順序。

原本覆蓋失敗的優先順序如下：

.checked 修改如以下：

優先等級相同，所以有 .checked 的要寫在後面才蓋得過。

最後修改 CSS 裡 .checked 的選擇器如下：

.table__body .table__row.checked {
  background: var(--checked-color);
}

但這樣寫選擇器蠻長的，要多寫 .table__body 是因為 <thead> 裡的 <tr> 也有 .table__row。
也許可以在 <tbody> 裡的 <tr> 新增 class，讓選擇器能精準選到 <tr>的 class .table__row，就不需要在前面加 .table__body 了。

最後附上個人覺得很有質感的夜間模式😎