0

我想给表格行一个单元格的类，如下所示：

我有这张桌子，

<table id="mytable">
 <tr>
  <th>Name</th>
  <th>Favorite color</th>
 </tr>
  <td>James</td>
  <td>red</td>
 </tr>
 <tr>
  <td>John</td>
  <td>blue</td>
 </tr>
</table>

我希望它以这样的方式结束。

<table id="mytable">
 <tr>
  <th>Name</th>
  <th>Favorite color</th>
 </tr>
 <tr class="red">
  <td>James</td>
  <td>red</td>
 </tr>
 <tr class="blue">
  <td>John</td>
  <td>blue</td>
 </tr>
</table>

这可能吗？

4

2 回答 2

4

您可以使用addClass方法：

$('tbody tr').addClass(function(){
    return $('td:last', this).text()
})

http://jsfiddle.net/SweLe/

请注意，您tr之前缺少开始标签<td>James</td>。

于 2012-11-21T15:06:31.140 回答
0

使用那里的 HTML：

$("tr:not(:first)").each(function(i) {
    $(this).addClass($(this).children("td").last().text());
});

jsFiddle （又名。示例）

这是做什么的：

  • $ = jQuery的简写符号
  • ("tr = jQuery 选择器的开始，在这种情况下，我们从标签开始tr
  • :not = 这告诉我们的选择器不要选择括号中的内容
  • (:first) = 这是 的参数:not，在这种情况下告诉它我们不希望在整体元素选择中的第一个元素
  • .each( = 这个 jQuery 函数在被选中的元素上就像一个 For 循环
    • jQuery 对象基于 0 索引（意味着它从 0 开始并向上计数）
  • function(i) { = 这是callback.each 调用函数的开始。i表示每个元素通过时的索引
  • $(this) = 这个 jQuery 选择器在循环中抓取当前元素
  • addClass( = 这个 jQuery 函数允许我们向元素添加类名
  • $(this) = 再次，指的是当前被操作的元素
  • .children("td") = 由于当前元素是一个 TR，那么我们知道它的子元素应该是td's，因此我们使用子选择器来抓取这些子元素
  • .last() = 这告诉我们的选择器我们只想要对象集合中的最后一个元素
  • .text() = 这告诉我们的选择器我们想要选择元素的文本
  • ); }); = 简单地关闭一切！
于 2012-11-21T15:09:06.737 回答