jQuery如何为表格的第一行添加CSS类？

Question

jQuery如何为表格的第一行添加CSS类？

3

我正在尝试使用jQuery将css类添加到表格的第一个tr上。我知道这应该非常容易，我找到了许多提供正确解决方案的链接和问题，比如以下三个：如何在使用jQuery时获取HTML表格中第一个tbody的第一个tr的id？ JQuery选择表格的第一行如何使用jQuery样式化页面上每个表格的第一行但对于我来说，这些都不起作用。

我有一个id为DataTableMovimenti的表格，并且我想应用css类“ct-active”。

我尝试了以下指令：

$("#DataTableMovimenti tr:first").addClass('ct-active');
$("#DataTableMovimenti").find("tr:first-children").addClass("ct-active");
$("#DataTableMovimenti").find("tr:first").addClass("ct-active");
$("#DataTableMovimenti").find("tr:eq(0)").addClass("ct-active");
$("#DataTableMovimenti").find("tbody tr:eq(0)").addClass("ct-active");
$("#DataTableMovimenti").children("tr:first").addClass("ct-active");
$("#DataTableMovimenti").closest('tr').addClass('ct-active');

我在jsp中的$document.ready()函数中插入了代码，因为我想在进入页面时突出显示表格的第一行。

该表格具有以下结构：

<table id="DataTableMovimenti" class="table ct-datatables">
<thead>
   <tr></tr>
      ............
</thead>
<tbody>
    <tr id="tableRowId" class="table-row-tr"></tr>
      ...........
</tbody>
</table>

我想要改变tbody部分中第一个tr的css类。

- amicoderozer

你的第一行代码应该没问题 - 不过使用CSS会更好。你有检查控制台中是否有错误，并且在DOMReady处理程序中运行代码吗？ - Rory McCrossan

3

$("#DataTableMovimenti tbody > tr:first-child").addClass('ct-active'); - Huelfe

你可以直接使用CSS来实现这个功能 #DataTableMovimenti tr:first-child。 - Pugazh

1

@Pugazh，如果要添加的类仅用于样式设置，则您的建议可能有效。类名也可能用于其他目的。 - Ifedi Okonkwo

我知道我尝试的其中一行应该可以像@Huelfe的解决方案一样工作，但我不知道为什么它们没有。而且我在控制台中没有错误。我接受了CSS的解决方案。那个很好用！谢谢大家。 - amicoderozer

5个回答

1

有一个名为:first的jQuery伪选择器，类似于CSS中的:first-of-type或:first-child，不同之处在于:first只会选择第一个元素，而不是满足其父元素的第一个子元素的所有元素。顺便提一下，在处理表格时，最好在选择器中指定<tbody>，否则你将会选中<thead>中的<tr>。

$(function() {
  $('#DataTableMovimenti tbody tr:first').removeClass("table-row-tr").addClass("table-row-tr-Active");
});

.table-row-tr-Active {
  background: red;
}
table {
  width: 200px;
}
table,
td {
  border: 2px solid grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

<table id="DataTableMovimenti" class="table ct-datatables">
  <thead>
    <tr>
      <td>HEADER</td>
    </tr>

  </thead>
  <tbody>
    <tr id="tableRowId" class="table-row-tr">
      <td>CELL</td>
    </tr>

  </tbody>
</table>

- zer00ne

1

Try this :

$('#DataTableMovimenti tbody tr:first-child').addClass('ct-active');

- Pratik Deshmukh

1

:first 伪类相当于 :eq( 0 )。也可以写成 :lt( 1 )。虽然它只匹配一个元素，但是:first-child可以匹配多个元素：每个父元素都可以匹配一个。

附加说明：

由于:first是jQuery的扩展而不是CSS规范的一部分，使用:first查询不能利用本地DOM querySelectorAll()方法提供的性能提升。为了在使用:first选择元素时获得最佳性能，请先使用纯CSS选择器选择元素，然后使用.filter(":first")。所选元素按照它们在文档中出现的顺序排列。例如：

$("table tr:first").addClass('yourclass-name');

或者针对特定的表格：

$("#myTable tr:first").addClass('yourclass-name');

$("tr:first").addClass("demo-class");

td {
  color: blue;
  font-weight: bold;
}
.demo-class {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>first demo</title>
</head>

<body>

  <table>
    <tr>
      <td>Row 1</td>
    </tr>
    <tr>
      <td>Row 2</td>
    </tr>
    <tr>
      <td>Row 3</td>
    </tr>
  </table>


</body>

</html>

- Himanshu Vaghela

0

最佳方法是使用伪选择器:first。

$('#DataTableMovimenti tbody tr:first').addClass('active');

- user7300841

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Alexis · Accepted Answer

在你的选择器中添加 tbody。

$("#DataTableMovimenti tbody tr:first").addClass('ct-active');

.ct-active{
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="DataTableMovimenti">
  <thead>
    <tr>
      <td>First thead</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>First tbody</td>
    </tr>
     <tr>
       <td>Second tbody</td>
     </tr>
  </tbody>
</table>

最好使用CSS来完成这个任务。

#DataTableMovimenti tbody > tr:first-child {
  color:red;
 }

    <table id="DataTableMovimenti">
      <thead>
        <tr>
          <td>First thead</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>First tbody</td>
        </tr>
        <tr>
          <td>Second tbody</td>
        </tr>
      </tbody>
    </table>