Question

我在我的HTML中使用KnockoutJS将表行的可见性数据绑定到某些可观察值，如我随附的JavaScript中所定义。我的表看起来像这样：

<table class="myTable">
    <tr data-bind="if: thisRowVisible"> <!-- Arbitrary data here --> </tr>
    <tr data-bind="if: thatRowVisible"> <!-- Arbitrary data here --> </tr>
    <tr data-bind="if: anotherRowVisible"> <!-- Arbitrary data here --> </tr>
    <!-- More rows defined here -->
</table>

当应用程序运行时，可以使用这些数据绑定的if值隐藏或显示表的行。为了给表格的行交替颜色（斑马/条纹），我在CSS中定义了以下内容：

.myTable tr:nth-child(even) td {
   background-color: black;
}
.myTable tr:nth-child(odd) td {
   background-color: gray;
}

通常，此CSS会正确设置行的样式。偶数行将显示为黑色，奇数行将显示为灰色。但是，当您抛出Knockout数据绑定时，我的问题就出现了。

例如，假设我的数据绑定导致索引＃2行被隐藏。即使该行被隐藏，该行的<tr>定义仍然存在于表中。这会抛弃交替的行颜色。由于索引＃2仍然存在，但是被隐藏，它仍然包含在交替的行颜色中。这意味着两个灰色行将显示在彼此之上。

是否有任何可以实现正确的交替表行颜色，同时仍然使用我的KnockoutJS模式？ KO数据绑定是否有一些技巧可以完全从Markup中删除隐藏的<tr>，以便正确应用CSS样式？

Answer 1

您可以使用虚拟元素 工作示例：http://jsfiddle.net/zs4B2/1/。

Answer 2

您可以将特定类仅分配给可见元素，并仅为该类应用斑马纹样式。 数据绑定将如下所示：

<table class="myTable">
    <tr data-bind="if: thisRowVisible, attr: {'class': thisRowVisible ? 'rowVisible' : 'rowInvisible' "> <!-- Arbitrary data here --> </tr>
    <tr data-bind="if: thatRowVisible, attr: {'class': thatRowVisible ? 'rowVisible' : 'rowInvisible'"> <!-- Arbitrary data here --> </tr>
    <tr data-bind="if: thatIsNotVisible, attr: {'class': thatIsNotVisible ? 'rowVisible' : 'rowInvisible'"> <!-- Arbitrary data here --> </tr>
    <!-- More rows defined here -->
</table>

CSS ：

.myTable tr.rowVisible:nth-child(even) td {
   background-color: black;
}
.myTable tr.rowVisible:nth-child(odd) td {
   background-color: gray;
}

<强> FIDDLE EXAMPLE

KnockoutJS表包含交替行颜色的样式

2 个答案: