Question

大家好我正在尝试使用jquery将css类添加到表的第一个tr中。我知道这应该是非常容易的，我找到了许多提供正确解决方案的链接和问题。像这三个和其他人一样：

但对我来说，这些都不起作用。

我有一个ID为DataTableMovimenti的表，我想应用css类＆＃34; ct-active＆＃34;

我尝试了以下说明：

$("#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类。提前致谢

Answer 1

在选择器中添加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>

Answer 2

试试这个：

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

Answer 3

：first 伪类等同于：eq（0）。它也可以写成：lt（1）。虽然这只匹配一个元素，但：first-child 可以匹配多个：每个父元素一个。

附加说明：

因为：first 是jQuery扩展而不是CSS规范的一部分，所以查询使用：first无法利用本机DOM提供的性能提升 querySelectorAll（）方法。要在使用：first 选择元素时获得最佳性能，首先使用纯CSS选择器选择元素，然后使用 .filter（＆＃34;：first＆＃34;）。所选元素按其在文档中的外观顺序排列。例如：

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

或者对于特定的表格：

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

有一个名为:first的jQuery伪选择器，就像CSS :first-of-type或:first-child，区别在于:first只会选择 THE 第一个元素，而不是符合成为父母第一个孩子标准的每个元素。顺便说一下，在处理表格时，最好在选择器中指定<tbody>，否则最终会定位<tr>中的<thead>。

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

Answer 5

最好的方法是使用伪选择器：首先。

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

Jquery将css类添加到表的第一行

5 个答案: