單擊后突出顯示表格行？

Question

如何突出顯示表格的選定行？ 我正在使用JavaScript ES6映射函數生成表行，並在單元格中具有ID和名稱。 所以我需要兩件事。

1. 我想更改單擊的行的顏色，然后
2. 我需要獲取函數中特定行的ID嗎？

我的代碼看起來像這樣

<table border="0" cellspacing="0" cellpadding="0">
    ${users? users.map((user) => html`
    <tr>
        <td style="width: 104px;">user.id</td>
        <td style="width: 175px;">
            user.name
        </td>

    </tr>
    `) : ''}
</table>

Answer 1

我需要獲取函數中特定行的ID嗎？

您可以將tr on-click處理程序與匿名函數綁定on-click以將user傳遞給您的函數。

<tr on-click='${() => this.selectUser(user)}'>

這樣，在selectUser函數中將接收user作為參數。

我想更改我單擊的行的顏色

您可以通過使用一些函數（例如querySelector和setAttribute來手動操作DOM，但我建議您將該狀態保留為屬性。

在selectUser函數中

selectUser (user) {
  this.selectedUser = user
}

然后在tr上綁定selected屬性

<tr selected?='${user === selectedUser}' on-click='${() => this.selectUser(user)}'>

Stackblitz上的現場演示