Blazor高亮显示选定的表行

Question

我的blazor项目中有以下表格呈现：

<table class="table table-bordered accountTable @HighlightSelected" >
<thead>
<tr>
<th>Id</th>
<th>Name</th>
</tr>
</thead>
<tbody>
@if (Accounts != null) 
{
@foreach (var account in Accounts)
{
<tr @onclick="@(() => ReturnRowData(account))"> 
<td >@account.Id</td>
<td >@account.Name</td>
</tr>
}
}
else
{
<p>No accounts to display...</p>
}
</tbody>
</table>
@code{
[Parameter]
public List<Account> Accounts { get; set; }
[Parameter]
public EventCallback<Account> OnRowClicked{get;set;}
public string HighlightSelected = "normal";
public async void ReturnRowData(Account account)
{
HighlightSelected = "highlight";
await OnRowClicked.InvokeAsync(account);
}
}

单击此表上的一行时，它会将选定的行数据返回到我的索引页，以便在其他函数中使用。我在这里要做的是为选定的行添加一个新的背景色。

表@HighlightSelected上的参数是一个字符串变量，我正在使用它来替换所需的CSS更改。但是，css更改会添加到每一行，而不仅仅是选定的一行。

在我的css中，我尝试了针对我想要的特定td的不同组合，但它总是导致整个表被突出显示。示例

.highlight table tbody tr.highlight td {
background-color: red;
} 

我做错了什么？

我知道javascript可以做到这一点，但如果可能的话，我希望不惜一切代价避免这种情况。

Answer 1

每当我使用List时，我通常会创建一个单独的实例来进行选择和比较。

@page "/accounts"

<table class="table table-bordered accountTable">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
</tr>
</thead>
<tbody>
@if (AccountsList != null)
{
@foreach (var account in AccountsList)
{
string colorClass= (account == SelectedAccount) ? "MyHighlightClass" : "";
<tr class="@colorClass" style="color:navy; cursor:pointer; text-decoration:underline" @onclick="() => { ReturnRowData(account); SelectedAccount = account; }">
<td>@account.Id</td>
<td>@account.Name</td>
</tr>
}
}
else
{
<p>No accounts to display...</p>
}
</tbody>
</table>
@if (SelectedAccount.Id != 0)
{
<h3>Selected account #@SelectedAccount.Id (@SelectedAccount.Name) </h3>
}
@code {
public class Account
{
public int Id;
public string Name = "";
}
[Parameter]
public List<Account> AccountsList { get; set; } = new List<Account>() {
new Account(){ Id = 1, Name="John" },
new Account(){ Id = 2, Name="Jeff" },
new Account(){ Id = 3, Name="Jane" }
};
Account SelectedAccount { get; set; } = new Account();
void ReturnRowData(Account account)
{
// Do data stuff.
}
}