在 HTML 表格中显示/隐藏图像

Show/Hide Image in HTML table

本文关键字：隐藏图像显示 HTML 表格更新时间：2023-09-26

在我看来，我有一个简单的表格，显示了一些工作流运行。"状态"属性可以显示"失败"或"成功"。我希望"成功.png"显示在所有成功的运行中，"失败.png显示所有失败的运行。

我该怎么做？

@foreach (var item in Model)
        {
            <tr class="myToolTip" data-toggle="tooltip" data-html="true" title="" data-placement="left">
                <td>                  
                    <span><img src="~/Content/Img/Failed.png" id="failedLogo"/></span>
                    <span><img src="~/Content/Img/Succeeded.png" id="successLogo" /></span>
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Status).
                </td>
		<td>
                    @Html.DisplayFor(modelItem => item.Name)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.CorrelationId)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.StartTime)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.EndTime)
                </td>
                <td>
                    <a href="@Html.DisplayFor(modelItem => item.InputUri)">Input Uri</a>
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.InputContentSize)@{WriteLiteral("Kb");}
                </td>
                <td>
                    <a href="@Html.DisplayFor(modelItem => item.OutputUri)">Output Uri</a>
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.OutputContentSize)@{WriteLiteral("Kb");}
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Error)
               </td>
            </tr>
                        }
    </table>

你可以做这样的事情：

<img src='@(item.Status=="Succeeded" ? "Succeeded.png" : "Failed.png")' alt='status' />

首先将列结果转换为图像，然后在适用的情况下显示图像。例如：

if $result = "1" then
    $image = "success.gif"
else
    $image = "fail.gif"
end if

然后，您可以使用$image作为要在表格中显示的结果。

添加了 if 语句，它起作用了！