如何使用 jQuery 设置页面上每个表格的第一行的样式答案

【问题标题】：How do I style the first row of every table on the page using jQuery如何使用 jQuery 设置页面上每个表格的第一行的样式
【发布时间】：2012-10-17 16:03:57
【问题描述】：

我需要手动设置页面上每个表格的第一行的样式。不幸的是，我正在处理一些旧浏览器，所以想通过 jQuery 来做这件事。

目前我正在使用：

$(function() {
 $(".OpenCourse tr:first").addClass("OpenCoursesHeader");
});

然后将.OpenCoursesHeader td {} 添加到样式中。

OpenCoursesHeader 类似乎只应用于第一个表。

任何想法如何让它应用于第二个？如果这样更简单，页面上将始终只有两个表格。

【问题讨论】：

对你的表应用一个通用的 CSS 类...我猜第二个表没有 .OpenCourse 类。

标签： jquery css html-table

【解决方案1】：

您可以使用first-child 选择器。 first 只会选择您正在使用的选择器的第一个元素。

$(function() {
 $(".OpenCourse tr:first-child").addClass("OpenCoursesHeader");
});

但是如果你有嵌套表，这个解决方案也会将类添加到第一个tr。

【讨论】：

当涉及多个thead/tbodys - fiddle时，我仍然遇到与我相同的问题，在这种情况下，我更喜欢Vision的解决方案。
@FabrícioMatté 是的。我已经指出了嵌套表的问题，但没有考虑到 thead/tbody。好点子！
如果我没记错的话，:first 不一定是页面上的第一个，只是当前正在使用的任何集合中的第一个（在这种情况下，.OpenCourse 的所有tr 子级元素）

【解决方案2】：

您可以使用find()，它会起作用：

$(".OpenCourse").find("tr:first").addClass("OpenCoursesHeader");

演示： http://jsfiddle.net/bUqPX/1/ -- 感谢Fabrício :)

【讨论】：

看起来不错，+1 因为在使用 thead/tbody 元素的情况下，这比我的更防弹。 =]

【解决方案3】：

$(function() {
    $(".OpenCourse tr:nth-child(1)").addClass("OpenCoursesHeader");
});

Fiddle

:nth-child() selector Reference

或者您可以使用@ComputerArts 回答的:first-child selector，相当于documentation 中的:nth-child(1)。

此外，如果您有 <thead>/<tbody>/<tfooter> 元素，这可能无法正常工作，在这种情况下，您还必须在选择器中指定要应用样式的元素：

$(".OpenCourse thead:nth-child(1) tr:nth-child(1)").addClass("OpenCoursesHeader");

【讨论】：

似乎根本不起作用，第一张桌子现在失去了样式。
好吧，如果您的答案都不起作用，请更新 fiddle 以重现您的问题，我现在就 afk 但稍后会尽快查找。

【解决方案4】：

试试这个：

$(function() {  
     $("table tr:first").addClass("OpenCoursesHeader"); 
});

这将适用于页面上的所有表格。希望这会有所帮助！

【讨论】：

我必须将其限制为 .OpenCourses 作为他们的其他表格样式

【解决方案5】：

$(function() {
    $(".OpenCourse").each(function() {
        $("tr:first",this).addClass("OpenCoursesHeader");
    });
});

试试看，有没有可以查看代码的页面？

【讨论】：

【解决方案6】：

首先选择table，然后在tr:first 上执行find。

下面假设OpenCourse是一个表格集合的容器..

$(".OpenCourse table").find("tr:first").addClass("OpenCoursesHeader");

如果OpenCourse 是表的类，那么试试@Vision 的答案

【讨论】：