[筆記] KeyCode & querySelectorAll 全部加上事件 @地瓜大的飛翔旅程

章節連結

重點整理

1.KeyCode 是什麼？
2.querySelectorAll 全部加上事件

這回想要實作的狀況是：當使用者在輸入框中按下 “Enter” 後，可以選取到表格中的每一橫列。若要達成這個目的，你需要知道 KeyCode 代碼以及如何在表格中的每一橫欄全面加上事件監聽。

重點整理

1.KeyCode 是什麼？

每一個鍵盤按鈕都有一個數字代號。這個列表已經有熱心的專家整理在 github 上了，可以點這裡看。
這回的案例中，Enter 的代號是 13 (型態是數字)。

2.querySelectorAll 全部加上事件

說穿了不難，就是把 querySelector 加個迭代器(ex: for loop) 就可以完成。

// HTML 部分
<table>
    <thead>
      <tr>
        <td>TEST</td>
      </tr>
    </thead>
    <tbody>
      <tr class="target">
        <td>A</td>
        <td>B</td>
        <td>C</td>
      </tr>
      <tr class="target">
        <td>D</td>
        <td>E</td>
        <td>F</td>
      </tr>
      <tr class="target">
        <td>G</td>
        <td>H</td>
        <td>I</td>
      </tr>
    </tbody>
  </table>

// JavaScript
const target = document.querySelectorAll('.target')

for (let i = 0; i < target.length; i++) {
  let result = target[i]
  result.addEventListener('click', function () {
    result.style = "background-color:red"
  })
}

// HTML 部分

<table>

<thead>

<tr>

</tr>

</thead>

<tbody>

</tr>

</tr>

</tr>

</tbody>

</table>

// JavaScript

const target = document.querySelectorAll('.target')

for (let i = 0; i < target.length; i++) {

let result = target[i]

result.addEventListener('click', function () {

result.style = "background-color:red"

})

}

按讚加入粉絲團

重點整理

1.KeyCode 是什麼？

2.querySelectorAll 全部加上事件

延伸閱讀