Question

我有一个动态表，需要为每个TD分配它自己的类。在下面的示例中，.one正在应用于此表的所有TD。使用CSS（或Jquery），我可以将td类.two和.three分配给该表的第二个和第三个子节点吗？

[请不要在TD上添加课程名称;这是一张动态表格]

动态 - 为了澄清，表中的TD / TR数量是未知的。因此，无论是否有3个TD / TR或10个TD / TR，CSS都必须足够智能化。

HTML：

<table id="foo">
  <tr>
   <td>One</td>
  </tr>
  <tr>
   <td>Two</td>
  </tr>
  <tr>
   <td>Three</td>
  </tr>
</table>

CSS：

 #foo{
   position: absolute;
   display: block;
   background: gray;
   color: white;
   height: 67px;
   width: 500px;
   border: 1px solid black;
}

tr {
   width: 500px;
   border: 1px solid black;
}

.one td {
   background: red;
   display: block;
   position: relative;
   left: 0px;
   width: 15px;
   border: 1px solid black;
   height: 19px;
   text-indent: 22px;
}

.two td {
   background: green;
   display: block;
   position: relative;
   left: 0px;
   width: 15px;
   border: 1px solid black;
   height: 19px;
   text-indent: 22px;
}

请参阅JS Fiddle：http://jsfiddle.net/bigthyme/kM7H9/

Answer 1

您可以将集合中的每个元素索引用作查找：

var classes = ['one', 'two', 'three'];

$("#foo td").attr("class", function (index, value) {
    return classes[index]; // 0 returns 'one', 1 returns 'two', etc.
});

演示：http://jsfiddle.net/SzKbh/1/

你不需要这样做;你可以在不使用类的情况下定位它们：

tr:nth-of-type(1) td { color: red }
tr:nth-of-type(2) td { color: green }
tr:nth-of-type(3) td { color: blue }

演示：http://jsfiddle.net/SzKbh/

在现代浏览器中有很好的支持。这确实需要您明确设置每行的颜色，从而知道您将拥有多少行。如果您不知道自己拥有多少行，则可以使用更复杂的选择器：

table tr:nth-child(2n+0) { color: red }
table tr:nth-child(2n+1) { color: blue }
table tr:nth-child(3n+0) { color: green }

演示：http://jsfiddle.net/SzKbh/2/

在表td上添加多个类

1 个答案: