Как я могу скрыть столбец <table>, если выполняется условие?
У меня есть <table> с несколькими строками и столбцами. Я хочу скрыть последний столбец, если конкретная переменная foo в коде равна -1.
Поэтому я не могу использовать CSS и :last-child, потому что в CSS у меня нет доступа к foo.
Я попытался стилизовать последний столбец <colgroup> с помощью <col style = "@(foo == -1d ? "visibility: collapse" : "")">, но это не свернуло весь столбец, но по-прежнему отображало супер- и нижние индексы <sup> и sub.
Конечно, я мог бы заменить
<tr>
<td></td>
<td></td>
<td></td>
</tr>
с
<tr>
<td></td>
<td></td>
@if (foo != -1)
{
<td></td>
}
</tr>
в каждом ряду, но я надеюсь, что есть более чистый способ.
Вы можете сделать это способом CSS, способом бритвы или обоими способами. Как было сказано ранее, вам придется поставить логику на каждое место. Однако вы также можете заменить его компонентом Blazor.
Ответы 2
Вы можете использовать галочку @if (foo...), чтобы дополнительно определить класс CSS. Обязательно используйте имя класса, уникальное для других CSS, которые могут существовать.
@if (foo == -1)
{
<style type = "text/css">
.sometimesHidden { display: none; }
</style>
}
...
<tr>
<td>A</td>
<td>B</td>
<td class = "sometimesHidden">X</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
<td class = "sometimesHidden">Y</td>
</tr>
Обратите внимание, что это всегда будет отображать последний <td> из каждого <tr>. Вам нужно убедиться, что эти ячейки (и особенно их содержимое) не вызывают ошибок при отображении.
Или вы можете использовать встроенный стиль:
@{
var tdStyle = foo == -1 ? "display: none;" : "";
}
...
<tr>
<td>A</td>
<td>B</td>
<td style = "@(tdStyle)">X</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
<td style = "@(tdStyle)">Y</td>
</tr>
Я определил логическое значение в фоновом режиме и сделал различие между регистрами в <td style>. Прямое определение строки, как вы делаете, еще лучше. Спасибо.
Для этого можно использовать компоненты Blazor:
MyLastColumn.razor
@if (Foo != -1){
<td>@ChildContent</td>
}
@code {
[Parameter]
public RenderFragment? ChildContent { get; set; }
[Parameter]
public int Foo { get; set; }
}
А затем используйте его:
<MyLastColumn Foo = "@foo">content</MyLastColumn>
Это сработало бы, но в этом простом случае это слишком много. Спасибо, в любом случае.
Было бы лучше учесть, если бы вы динамически составляли строки таблицы из источника данных. Но поскольку, как указано в проблеме, кажется, что таблица статически определена как html в вашем шаблоне, вы вынуждены ставить такое условие в каждом месте, где у вас есть статический фрагмент html, который вы хотели исключить.