Question

以下是正在使用的示例表。（可以有＆＃39; n＆＃39;行）

<table border="true">
<tbody>
  <tr>
    <td>
    First Row- First Data
    </td>
    <td>
    First Row- Second Data
    </td>
    <td>
    First Row- Third Data
    </td>
    <td>
    <a href="SomeLink2">First Row- Fourth Data</a>
    </td>
  </tr>
  <tr>
    <td>
    Second Row- First Data
    </td>
    <td>
    Second Row- Second Data
    </td>
    <td>
    <a href="SomeLink3">Second Row- Third Data</a>
    </td>
    <td>
    <a href="SomeLink4">Second Row- Fourth Data</a>
    </td>
  </tr>
  <tr>
    <td>
    Third Row- First Data
    </td>
    <td>
    Third Row- Second Data
    </td>
    <td>
    <a href="SomeLink">Third Row- Third Data</a>
    </td>
    <td>
    <a href="SomeLink4">Third Row- Fourth Data</a>
    </td>
  </tr>
</tbody>
</table>

我想使用css选择器为列中的第一个超链接选择列。该第一个超链接可以存在于从1到n的任何行中。在上面的例子中，超链接在第二行。以下jQuery脚本显示了我当前的实现。

$(document).ready(function () {
     $('table tbody tr td:nth-last-child(2) a:nth-child(1)').css('backgroundColor', 'orange');
});

这会生成以下输出：

但是，我的目标是在第三列中仅更改第一个超链接的背景颜色（在上面的情况下，它可能是第二行，但我需要第n行的通用选择器）橙子。请注意，我必须使用css选择器选择元素。

Answer 1

只需将对.first()的调用附加到您的jQuery选择器：

$(document).ready(function() {
  $('table tbody tr td:nth-last-child(2) a:nth-child(1)').first().css('backgroundColor', 'orange');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table border="true">
  <tbody>
    <tr>
      <td>
        First Row- First Data
      </td>
      <td>
        First Row- Second Data
      </td>
      <td>
        <a href="SomeLink">First Row- Third Data</a>
      </td>
      <td>
        <a href="SomeLink2">First Row- Fourth Data</a>
      </td>
    </tr>
    <tr>
      <td>
        Second Row- First Data
      </td>
      <td>
        Second Row- Second Data
      </td>
      <td>
        <a href="SomeLink3">Second Row- Third Data</a>
      </td>
      <td>
        <a href="SomeLink4">Second Row- Fourth Data</a>
      </td>
    </tr>
    <tr>
      <td>
        Third Row- First Data
      </td>
      <td>
        Third Row- Second Data
      </td>
      <td>
        Third Row- Third Data
      </td>
      <td>
        <a href="SomeLink4">Third Row- Fourth Data</a>
      </td>
    </tr>
  </tbody>
</table>

Answer 2

table tbody tr：nth-child（2）td：nth-child（3）{background-color：yellow;} table tbody tr：nth-child（）td：nth-child（3）{background-color：yellow;}

Answer 3

这是因为您没有选择特定的行（<tr>）元素。如果第三行的第三个单元也是一个链接，那将更加明显。您需要将JS更改为：

$(document).ready(function () {
     $('table tbody tr:first-child td:nth-last-child(2) a:nth-child(1)').css('backgroundColor', 'orange');
});

:first-child的使用允许您限制对表格的第一个<tr>元素的更改。

Answer 4

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-rc1/jquery.min.js"></script>

<script>
$(document).ready(function () {
     $('table tbody tr:nth-child(1) td:nth-child(3) a:nth-child(1)').css('backgroundColor', 'orange');
}); 
</script>

<table border="true">
<tbody>
  <tr>
    <td>
    First Row- First Data
    </td>
    <td>
    First Row- Second Data
    </td>
    <td>
    <a href="SomeLink">First Row- Third Data</a>
    </td>
    <td>
    <a href="SomeLink2">First Row- Fourth Data</a>
    </td>
  </tr>
  <tr>
    <td>
    Second Row- First Data
    </td>
    <td>
    Second Row- Second Data
    </td>
    <td>
    <a href="SomeLink3">Second Row- Third Data</a>
    </td>
    <td>
    <a href="SomeLink4">Second Row- Fourth Data</a>
    </td>
  </tr>
  <tr>
    <td>
    Third Row- First Data
    </td>
    <td>
    Third Row- Second Data
    </td>
    <td>
    Third Row- Third Data
    </td>
    <td>
    <a href="SomeLink4">Third Row- Fourth Data</a>
    </td>
  </tr>
</tbody>
</table>

仅使用nth-child。

使用CSS nth-child选择单个表格单元格

4 个答案: