使用td-value作为trQuery与jQuery?

时间:2012-11-21 15:02:31

标签: jquery css html-table

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

我有这张桌子,

<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>

这可能吗?

2 个答案:

答案 0 :(得分:4)

您可以使用addClass方法:

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

http://jsfiddle.net/SwELe/

请注意,您在tr之前缺少打开<td>James</td>标记。

答案 1 :(得分:0)

使用您的HTML:

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

jsFiddle (aka. example)

这是做什么的:

  • $ = jQuery
  • 的简写符号
  • ("tr = jQuery Selector的开头,在这种情况下,我们从标记tr开始
  • :not =这告诉我们的选择器选择括号中的内容
  • (:first) =这是:not的参数,在这种情况下告诉我们我们不希望整个元素选择中的第一个元素
  • .each( =这个jQuery函数就像已经选择的元素上的For循环一样
    • jQuery Object是0基于索引(意味着它从0开始并向上计数)
  • function(i) {=这是.each调用的callback函数的开头。 i表示每个元素在通过
  • 时的索引
  • $(this) =这个jQuery选择器正在抓取循环中的当前元素
  • addClass( =这个jQuery函数允许我们为元素添加类名
  • $(this) =再次,指的是被操纵的当前元素
  • .children("td") =由于当前元素是TR,我们知道它的子元素应该是td,因此我们使用子选择器来抓住那些孩子
  • .last() =这告诉我们的选择器我们只想要对象集合中的 last 元素
  • .text() =这告诉我们的选择器我们想要选择元素的文本
  • ); }); =简单地关闭所有东西!