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/（已更新）（old =＆gt;）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");
});

$("#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）带来第一个并添加类

$("#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"});

HTML表格标题使用jquery进行样式设置

4 个答案: