javascript - 使用 jQUery 的 HTML 表头样式

Question

我有一张如下表。我只需要为第一个标题列提供背景颜色（黄色）。此外，标题中的所有文本颜色都应为蓝色（对于两列）。使用 jQuery 实现它的方法是什么？

注意：我正在尝试学习 jQuery。因此解决方案应该使用 jQuery。

   <table id = "myTable">
        <thead>
            <tr>
                <th>
                     <a href="http://www.Lijo.com">Name</a>
                </th>
                <th>
                    Address
                </th>
            </tr>
        </thead>
        <tr>
            <td>
                Lijo
            </td>
            <td>
                India
            </td>
        </tr>
    </table>

Answer 1

Hiya演示 http://jsfiddle.net/r3jMv/1/（更新）（旧 =>）http://jsfiddle.net/Zarhu/2/

并在此处使用蓝色： http: //jsfiddle.net/r3jMv/6/下面评论的另一个更新版本：http: //jsfiddle.net/cC6hk/

以下应该可以解决问题。

这可能是一个很好的游乐场：http: //vkanakaraj.wordpress.com/2009/06/18/select-a-column-of-a-table-using-jquery/

jQuery代码

$(function(){
  // Change first column background color.

  $("table thead tr th:first-child").css("background-color","#ff0000");
});

​</p>

$("#myTable > thead > tr >th").css("background-color","yellow");​

html

<table id = "myTable">
        <thead>
            <tr>
                <th>
                    Name
                </th>
                <th>
                    Address
                </th>
            </tr>
        </thead>
        <tr>
            <td>
                Lijo
            </td>
            <td>
                India
            </td>
        </tr>
    </table>
​

Answer 2

您可以像这样选择第一个标题列：

var firstColumnHeader = $('#myTable thead th:first-child');

然后您可以使用该css方法更新背景颜色，如下所示：

firstColumnHeader.css('background', '#FCD116');

这是一个jsfiddle演示。

Answer 3

这是第一个标题，其中类名应该做所有的样式。选择器获取#mytable 中的所有“th”，并使用 eq(0) 带来第一个 th 并将类添加到其中

$("#myTable th").eq(0).addClass("ClassName")

这适用于类名 2 应该为您设置样式的所有标题

$("#myTable th").addClass("ClassName2")

Answer 4

$("#myTable th:first").css({
    "background-color": "yellow"
});
$("#myTable th").css({
    "color": "blue"
});​

您也可以在一行中实现相同的目的：

$("#myTable th")
    .css({"color": "blue"})
    .filter(":first")
    .css({"background-color": "yellow"});​