如何設定選取表格的顏色與滑動效果(程式碼待修正)

嗨！今天想分享的是在Alpha camp課程中的小任務：

如何在表格中設置被選定的表格顏色？還有如何設定滑動效果？

並針對以下個提問做說明

• 你完成了什麼？花了多少時間？為什麼會做這些事？
• 碰到什麼困難？如何解決？
• 回頭檢視流程與成果時，哪些部分你覺得可能有改善的空間？

任務一：如何在表格中設置被選定的表格顏色

• 花費時間：3個小時
• 使用的功能：querySelector、addEventListener、parentElement、classList的add與remove
• 步驟：利用querySelector將點選的範圍設置在白色表格，再設置事件監聽，當有checked發生(checkbox)，event範圍使用parentElement回溯至父層的父層(被選定的白色表格)，再利用classList新增或移除class:橘色。
• 碰到的困難：因為對DOM的操作不熟練，所以花比較多時間去複習
• 改善的空間：如果可以在過程中先想好步驟，並逐一分配各個步驟可以搭配的功能，複習完DOM之後，可以再加速開發的時間

//css
.table__row--checked {
  background: var(--main-color);
}

//javaScript
// change color:table__row
const tableBody = document.querySelector(".table__body");
tableBody.addEventListener("change", function (event) {
  const target = event.target;
  const theParent = event.target.parentElement.parentElement;
if (target.checked) {
    theParent.classList.add("table__row--checked");
  } else {
    theParent.classList.remove("table__row--checked");
  }
});

任務二：如何設定表格的滑動效果

• 花費時間：1個小時
• 使用的功能：position、overflow、height
• 步驟：將header固定後，讓下面的表格脫離頁面流，並離header50px，再使用overflow: scroll;切齊表格範圍並滑動，搭配height調整scroll的高度。
• 碰到的困難：當我使用position的fixed和absolute後，滑動時白框表格總是會超過灰框表格，在研究overflow後，才發現必須設定height，才能完美設置滑動框的大小

.table__header {
  position: fixed;
}
.table__body {
  position: absolute;
  margin-top: 50px;
  overflow: scroll;
  height: 500px;
}

• 改善的空間：流程上，可以先利用border瞄準好要調整的部分，再做後續的CSS更動