在 blazor 应用程序中动态设置 tr 颜色

Question

我有一个动态创建的表（存储过程返回数据表）并创建成功，但是当我单击单击事件

getTrnDetails(batchno)

时，我想为

<tr>

着色以显示单独的其他行。我该怎么做？

剃须刀模板

@foreach (DataRow row in opType.Rows) { 
sl = 1;
<tr>
  @foreach (DataColumn column in opType.Columns) { 
    string batchno = @row[column.ColumnName].ToString();
    <td>
      @if (sl == 1) {
         <i class="fas fa-eye mr-1" 
           @onclick="(()=>getTrnDetails(batchno))"  
           style="cursor: pointer;"></i> 
      } @row[column.ColumnName]
    </td>
    sl = sl + 1; 
  }
</tr>
}

Answer 1

您可以使用 JavaScript 代码。

1. 为每个

   <tr>

   元素提供唯一的ID。

2. 调用

   <tr>

   函数时传递

   getTrnDetails

   id。

3. 通过带有 JS.InvokeVoidAsync

    参数的 

   rowIndex 函数调用 JavaScript 函数。

4. 在index.html或单独的JS文件中实现您的JS函数（但确保您需要附加到index.html）。将 CSS 类添加到

   <tr>

   元素

@inject IJSRuntime JS;

<table class="table">
    @foreach (DataRow row in opType.Rows)
    {
        sl = 1;
        string rowId = "row_" + rowIndex;
        <tr id="@rowId">
            @foreach (DataColumn column in opType.Columns)
            {
                string batchno = @row[column.ColumnName].ToString();

                <td>
                    @if (sl == 1)
                    {

                        <i class="fas fa-eye mr-1" @onclick="(()=>getTrnDetails(batchno, rowId))" style="cursor: pointer;">
    </i>
                    }
                    @row[column.ColumnName]
                </td>
                sl = sl + 1;
            }
        </tr>

        rowIndex++;
    }
</table>

int rowIndex = 1;

public async Task getTrnDetails(string batchno, string rowId)
{
    await JS.InvokeVoidAsync("app.toggleTrColor", rowId);
}

<style>
    app { }

    .bg-yellow {
        background: yellow;
    }
</style>

<script type="text/javascript">
    window.app = {
         toggleTrColor: (rowId) => {
            var element = document.querySelector("tr#" + rowId);
            element.classList.toggle("bg-yellow");
        }
    };
</script>