javascript - 单击后突出显示表行？

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

I need to get the ID of that particular row in a function?

您可以将 tr 上的 on-click 处理程序与匿名函数绑定(bind)，以将 user 传递给您的函数。

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

这样在selectUser函数中会接收到user作为参数。

I want to change the color of the row which I have click

您可以使用一些函数(例如 querySelector 和 setAttribute)手动操作 DOM，但我建议您将该状态保留为属性。

在selectUser函数中

selectUser (user) {
  this.selectedUser = user
}

然后在 tr 上绑定(bind) selected 属性

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

现场演示 stackblitz