Blazor Server动态生成TD元素点击高亮问题求助

问题出在你用了全局布尔变量var_clicked，点击后所有TD都会基于这个变量判断样式，导致全部变红。要实现单个TD高亮，需要记录当前选中的具体文件标识，让每个TD单独判断自己是否为选中项。

步骤1：添加选中状态变量 #

在你的razor.cs文件中，新增一个变量存储当前选中的CNC文件名：

// 存储当前选中的CNC文件名
public string SelectedCncFileName { get; set; }

步骤2：修改样式判断方法 #

把原来的无参Style_CNC_File改成带参数的版本，接收当前循环的文件名，对比是否为选中项：

public string Style_CNC_File(string currentFileName)
{
    // 只有当前文件和选中文件一致时，才返回红色样式
    return currentFileName == SelectedCncFileName ? "color:#FF0000" : "color:#000000";
}

步骤3：更新点击事件逻辑 #

修改Read_CNC_Files方法，在处理业务逻辑的同时，把当前点击的文件名赋值给选中变量：

public void Read_CNC_Files(string arg0, string arg1, string arg2, string cncFileName)
{
    // 保留你原来的业务逻辑（读取CNC文件等操作）
    // ...

    // 记录当前选中的文件名
    SelectedCncFileName = cncFileName;
    // 若Blazor未自动更新UI，可手动调用StateHasChanged()触发刷新
    // StateHasChanged();
}

步骤4：修改Razor页面的TD绑定 #

在循环生成TD时，把当前文件名传入样式方法和点击事件：

<table>
    <tr>
        <td>CNC Files</td>
    </tr>
    @{ 
        if (Deltalogic.Return_Read_CNC_File == 0 && Deltalogic.Selected_CNC_File_Path_Type == "file")
        {
            for (var i = 0; i < Deltalogic.CNC_File_Array_lenght_dir - 1; i++)
            {
                var arg0 = "abc";
                var arg1 = "def";
                var arg2 = "ghi";
                var currentFileName = Deltalogic.CNC_File_Out_Array_dir[i];
                <tr>
                    <td style="@Style_CNC_File(currentFileName)" 
                        @onclick='@(e => Read_CNC_Files(arg0, arg1, arg2, currentFileName))'>
                        /@currentFileName
                    </td>
                </tr>
            }
        }
    }
</table>

更优雅的替代方案：用CSS类分离样式 #

如果想让样式和逻辑分离，可以定义CSS类，直接在TD上判断添加：

1. 定义CSS（可放在组件内的<style>或全局CSS文件）：

.cnc-highlight {
    color: #FF0000;
}
.cnc-default {
    color: #000000;
}

2. 修改Razor的TD部分：

<td class="@(currentFileName == SelectedCncFileName ? "cnc-highlight" : "cnc-default")" 
    @onclick='@(e => Read_CNC_Files(arg0, arg1, arg2, currentFileName))'>
    /@currentFileName
</td>

这种方式可以省去后台的Style_CNC_File方法，代码更简洁。

内容的提问来源于stack exchange，提问作者Mdarende