Question

我有一个用javascript制作的动态表。根据不同的用户事件，某些行将被隐藏，重新排列等。更具体地说，我使用display:none;来执行此操作。问题是行始终保持其原始背景颜色（想象如果所有行都可见，那么您可以看到交替的颜色）。如果我可以看到整个表格，那就没问题，但就像我提到的那样，有时某些行会被隐藏或出现在不同的位置。这通常导致两行或更多行的相同颜色堆叠在一起。

有一个类似的帖子：

Alternate table row color even if row is removed

我尽可能多地尝试了这些解决方案。但是我的问题仍然存在。可能是由于以下原因：

我没有删除列，我只是设置display:none;
我没有在jquery环境中工作，所以我只能使用本机javascript解决方案

我的代码是：

tr:nth-child(even) {
    background:gray;
}
tr:nth-child(odd) {
    background:lightgray;
}

我尝试了tr:nth-of-type(odd)和许多类似的变体。我还可以尝试使用CSS或原生javascript中的其他内容吗？

有关可见性/选择的更多信息：

CSS：

tr:not(.selected) {
  display: none;
}

JS：

my_circles.each(function(d,i) {
    if (my_bool===true) {
        d3.select(this).classed('selected',true);
        tableRows.get(this).classed("selected", true);
    }
});

我使用d3.js，但我想我会省略d3标签，因为这似乎更像是css或js问题。这是一个小片段，主要用于上下文，但基本上我们应该能够通过类赋值来推断可见性。如果您感到好奇，只要用户在相邻的散点图上选择一个圆圈即可。

Answer 1

不幸的是，对于这个问题，没有直接的CSS解决方案。主要是因为:not选择器不与nth-...选择器一起使用。

您最好的选择是通过Javascript每次重新划分行。

加载页面后立即对行进行条带化处理。之后，每当您在任何行上更改display时，都会再次触发条带函数。

这是一个粗略的例子：

var tab = document.getElementById("tab"), 
  btns = tab.getElementsByTagName("a"), 
  show = document.getElementById("show"), 
  rows
;

stripe(); // Stripe the rows in beginning

// The stripe function itself
function stripe() {
  // select all rows which are not hidden
  rows = tab.querySelectorAll('tr:not(.hidden)');

  // add a class for every second such row
  for(var x = 0; x < rows.length; x++) {
    if (x % 2 == 0) { rows[x].classList.add('alt'); }
    else { rows[x].classList.remove('alt'); }
  }
}

// dummy buttons to hide each row in this demo
[].forEach.call(btns, function(elem) {
  elem.addEventListener('click', hide);
});

// your actual code where you hide your rows
function hide(e) {
  e.target.parentNode.parentNode.classList.add('hidden');
  stripe(); // fire re-striping when hiding rows
}

// dummy button to show rows in this demo
show.addEventListener('click', function(e) {
  rows = tab.querySelectorAll('tr.hidden');
  [].forEach.call(rows, function(row) {
    row.classList.remove('hidden');
  });
  stripe(); // fire re-striping when showing rows
});

table { width: 70%; border: 1px solid gray; border-collapse: collapse; }
td { border: 1px solid gray; padding: 4px; }
tr.hidden { display: none; }
#tab tr.alt { background-color: #ddd;}

<table id="tab"><tbody>
  <tr><td>Row 1</td><td><a href="#">Hide</a></td></tr>
  <tr><td>Row 2</td><td><a href="#">Hide</a></td></tr>
  <tr><td>Row 3</td><td><a href="#">Hide</a></td></tr>
  <tr><td>Row 4</td><td><a href="#">Hide</a></td></tr>
  <tr><td>Row 5</td><td><a href="#">Hide</a></td></tr>
</tbody></table><br />
<a id="show" href="#">Show All</a>

陪伴小提琴：https://jsfiddle.net/abhitalks/dz5aq5fk/

Answer 2

它不是CSS或本机JS解决方案，但这里是基于d3的解决方案。每次表中的行发生更改时，您都可以更改行的类。

d3.selectAll("tr.selected").classed("grey",function(d,i){return i%2 == 0});

它将grey类添加到每隔一行，并将其从所有其他行中删除。然后你可以使用css为行着色。

tr.grey {
    background:gray;
}
tr:not(.grey) {
    background:lightgray;
}

以下是显示此策略的jsbin。

Answer 3

这不是一个完美的解决方案，但您可以在表格中使用渐变背景来获得所需的结果。

下面的

是使用表格中的渐变背景的示例。

＆＃13;

tr:not(.selected) {
  display: none;
}

table {
  background-color: gray; 
  background-image: linear-gradient(transparent 50%, lightgray 50%);
  background-size: 100% 36px;
}

＆＃13;

<table width="500" cellpadding="0" cellspacing="0">
  <tr  class="selected">
    <td>A</td>
    <td>B</td>
  </tr>
    <tr  class="selected">
    <td>C</td>
    <td>D</td>
  </tr>
    <tr>
    <td>E</td>
    <td>F</td>
  </tr>
    <tr class="selected">
    <td>G</td>
    <td>H</td>
  </tr>
    <tr>
    <td>I</td>
    <td>J</td>
  </tr>
      <tr>
    <td>E</td>
    <td>F</td>
  </tr>
    <tr class="selected">
    <td>G</td>
    <td>H</td>
  </tr>
  <tr class="selected">
    <td>G</td>
    <td>H</td>
  </tr>
  <tr class="selected">
    <td>G</td>
    <td>H</td>
  </tr>
    <tr>
    <td>I</td>
    <td>J</td>
  </tr>
  
</table>

＆＃13;

Answer 4

正如您正确指出的那样，css交替条纹不起作用的原因是您的行保留在原位，只是使用display:none隐藏。

诀窍是＆＃34; group＆＃34;将可见行和隐藏行放在一起，这样我们就不会结束非事件条带化。鉴于您的行的顺序并不重要，我们可以做的是将隐藏的行移动到其包含父级的顶部（使用.insertBefore）或底部（使用.appendChild）。类似的东西：

my_circles.each(function(d,i) {
    if (my_bool===true) {
        d3.select(this).classed('selected',true);
        var row = tableRows.get(this);
        row.parentNode.appendChild(row);
        row.classed("selected", true);
    }
});

交替表行颜色可以显示：无设置

4 个答案: