Question

我使用了几个表，我想要遮挡交替的表行。这样做的常用方法是

.t tbody > tr:nth-child(odd) > td:nth-child(1) {
      background-color:#f0f0f0;
    }

这适用于Firefox，Chrome和Safari，但IE不支持nth-child()伪类。如果没有使用类手动标记每一行，是否有替代的跨浏览器方法来实现此目的？我希望避免这种情况，因为它会消耗嵌入式系统上的空间。

注意：此页面由充当WiFi接入点的嵌入式系统提供。这意味着，客户端将连接到嵌入式系统，而不是互联网。意味着没有JS库。

编辑：IE 9将支持nth-child()，但我需要能够支持IE 7和8

Answer 1

没有;遗憾的是，您必须使用类来手动标记每一行以替换:nth-child(odd)。您可以将:nth-child(1)替换为:first-child，假设您支持IE7或IE8等内容，而不是非常旧的版本。

Answer 2

以下是您需要的CSS：

.shaded {
    background-color: #F0F0F0;
}

这是一个js函数，它将实现这一点，给出关于表结构的一些假设：

function go() {
  tables = document.getElementsByTag('table');
  var i, len = tables.length;
  for(i = 0; i < len; i++) {
    var tbody = tables[i].children[0] // assumes <tbody> is first child
    var k, num_trs = tbody.rows.length;
    for(k = 0; k < num_trs; k+=2) {  // k += 2 for alternate shading
      var tr = tbody.rows[k];
      tr.classList.add('shaded');
    }
  }
}

我确信有人可以对其进行改进，以便智能地选择tbody，或者使用参数来确定着色模式。

Answer 3

将此脚本放在页面的末尾。它假设找到了第一个tbody，但是您可以将其修改为任何偏移量（或处理多个tbodys），或者甚至通过使用特定id来使事情变得更容易。

<script>
(function(){
  var 
    tby = document.getElementsByTagName('tbody')[0],
    trs = tby.getElementsByTagName('tr'),
    i, l = trs.length
  ;
  for ( i=0; i<l; i++ ) {
    if ( (i + 1) & 1 ) {
      trs[i]
        .getElementsByTagName('td')[0]
          .style
            .backgroundColor = '#f0f0f0'
      ;
    }
  }
})();
</script>

如果您担心字节，可以缩小上述内容。

IE中的第n个子选择器替换

3 个答案: