Blazor 突出显示选定的表格行答案

【问题标题】：Blazor highlight selected table rowBlazor 突出显示选定的表格行
【发布时间】：2021-08-21 14:12:24
【问题描述】：

我的 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 完成，但我想尽可能避免这种情况。

【问题讨论】：

首先将课程应用于整个表格。您需要为每个帐户设置某种状态变量，并根据状态将类应用于行。您还需要在行上使用@key。
只要他不需要能够多选，那么单个比较项就可以了。
@Bennyboy1973 他谈到“选定的行”
是的，我也看到了。但是，我也看到了没有“s”的“row”和“single”这个词的几种用法。

标签： css .net-core razor html-table blazor

【解决方案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.
    }
}

【讨论】：