Question

如何突出显示表中选定的行？我正在使用JavaScript ES6映射函数生成表行，并在单元格中具有ID和名称。所以我需要两件事。

我想更改单击的行的颜色，然后
我需要获取函数中特定行的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吗？

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

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

通过这种方式，selectUser函数将接收user作为参数。

我想更改单击的行的颜色

您可以通过使用querySelector和setAttribute之类的某些功能来手动操作DOM，但我建议您将该状态保留为属性。

在selectUser函数中

selectUser (user) {
  this.selectedUser = user
}

然后在selected上绑定tr属性

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

stackblitz上的实时演示

单击后突出显示表格行？

1 个答案: