单击后突出显示表格行？

Question

How can I highlight the table selected row? I am generating table row with JavaScript ES6 map function, with IDs and Names in the cells. So I need two thing.

1. I want to change the color of the row which I have click and
2. I need to get the ID of that particular row in a function?

My code looks something like this

<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?

You can bind on-click handler on tr with anonymous function to pass user to your function.

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

In this way in selectUser function will receive user as parameter.

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

You can manually manipulate the DOM by using some functions such as querySelector and setAttribute but I would recommend you to keep that state as a property.

In selectUser function

selectUser (user) {
  this.selectedUser = user
}

then bind selected attribute on tr

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

Live demo on stackblitz