1

我使用了几个表，我想对交替的表行进行着色。这样做的常见方法是

.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

4

3 回答 3

3

不; 不幸的是，您必须使用要替换的类手动标记每一行:nth-child(odd)。不过，您可以替换:nth-child(1)为:first-child，假设您支持 IE7 或 IE8 之类的东西，而不是非常旧的版本。

于 2013-08-30T20:50:41.883 回答
1

这是您需要的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，或者采用参数来确定着色模式。

于 2013-08-30T21:49:16.107 回答
1

将此脚本放在页面的末尾。它假定找到第一个 tbody，但您可以将其修改为任何偏移量（或处理多个 tbody），甚至通过使用特定 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>

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

于 2013-08-30T21:49:38.620 回答