如何动态隐藏和显示 html <tr>

Question

如何在OnInitializedAsync中添加代码以显示/隐藏C#中的razor页面？

<div class="form-row">
<table border="0" cellpadding="2" style="border-style:solid;border-width:2px">
<tbody>
<tr id="rowId" style="display: none;">
<td>
<label>test</label>
</td>
</tr>
</tbody>
</table>
</div>
@code {  
protected override void OnInitializedAsync()
{
// code to show <tr> with id="rowId"
}   
}

Answer 1

使用以下代码，初始化组件时，表行将被隐藏。当按下按钮时，它会变为可见。

<div class="form-row">
<table border="0" cellpadding="2" style="border-style:solid;border-width:2px">
<tbody>
@if (_rowVisible)
{
<tr id="rowId">
<td>
<label>test</label>
</td>
</tr>
}
</tbody>
</table>
</div>
<button @onclick="OnHideRowBtnClicked">Hide row</button>
@code {  
private bool _rowVisible;
protected override void OnInitializedAsync()
{
// set _rowVisible to true if row should be visible or false if row should be hidden
_rowVisible = true;
}   
private void OnHideRowBtnClicked()
{
_rowVisible = false;
}
}

使用style属性的另一种方法：

<div class="form-row">
<table border="0" cellpadding="2" style="border-style:solid;border-width:2px">
<tbody>
<tr id="rowId" style="@_rowStyle">
<td>
<label>test</label>
</td>
</tr>
</tbody>
</table>
</div>
<button @onclick="OnHideRowBtnClicked">Hide row</button>
<button @onclick="OnShowRowBtnClicked">Show row</button>
@code {  
private string? _rowStyle;
protected override void OnInitializedAsync()
{
}   
private void OnHideRowBtnClicked()
{
_rowStyle = "display: none;";
}
private void OnShowRowBtnClicked()
{
_rowStyle = null;
}
}