如何使用 td 颜色的点击事件更改<td>？关键点是 td 元素是用代码动态生成的

Question

在我的Blazor服务器应用程序中，我正在读取远程机器的CNC文件，并将它们列在表的行中。到目前为止一切正常。

当用户点击一个TD元素时，CNC文件的内容将显示在屏幕上的另一个表中(我没有显示这一部分，因为它与我的问题无关(

我希望最后选择的CNC文件(上次单击(应该突出显示(font=红色(。这意味着每次用户选择另一个CNC文件时，只有相关的文件应该高亮显示，所有其他文件都应该是默认颜色(黑色(。

如果我有一个静态表，我会使用a:focus。但我的问题是，我的td将动态生成。我必须将a:focus函数应用于一个td(被点击(。我该怎么做？我试图调用tdstyle＝"风格的函数@Style_CNC_File((">，但我在函数中定义的颜色应用于所有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";                        
<tr >
<td style="@Style_CNC_File()" @onclick='@(e => Read_CNC_Files(arg0,arg1,arg2))'>/@Deltalogic.CNC_File_Out_Array_dir[i]</td>
</tr>
}
}
}
</table>

在我的razor.cs文件中：

public string Style_CNC_File()
{
if (var_clicked == true)
{
return "color:#FF0000";
}
else
{
return "color:#000000";
}

}       

Answer 1

也许你可以为你的td设置一个id并存储所选的id:

<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";  
<tr >
<td @onclick='@(e => HandleClick(i, arg0,arg1,arg2))' style="@Getstyle(i)">/@Deltalogic.CNC_File_Out_Array_dir[i]</td>
</tr>
}
}
}
</table>
@code {
int selectedId = -1;
void HandleClick(int id, string args0, string args1, string args2)
{
selectedId = i;
Read_CNC_Files(arg0,arg1,arg2);
}
void Getstyle(int id)
{
if (selectedId == i)
return "background-color:red;";
return string.Empty;
}
}

您可以根据行的索引根据需要更改类或样式。