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

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

@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.
    }
}