如何使用td的<td>the颜色的onclick事件进行更改？关键是td元素是用代码动态生成的。

Question

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

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

我希望最后选择的数控文件(最后一次点击)应该高亮显示(font=red)。这意味着每次用户选择另一个CNC-文件时，只需高调相关的所有其他应该是默认颜色(黑色)。

如果我有一个静态表，我会使用a:focus。但我的问题是，我的td将动态生成。我必须为一个td应用a:focus函数(点击了这个函数)。我怎么能这么做？我尝试以td style="@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;
  }
 }

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