时间戳

首页 > 解决方案 > 如何使用 jquery 为表中的每个不同 ID 选择第一行？

jquery - 如何使用 jquery 为表中的每个不同 ID 选择第一行？

问题描述

我有一个像下面这样的表，我想根据该表中的 ID 值选择第一个重复项。

 <table>
  <thead>
    <tr>
      <th>Date</th>
      <th>ID</th>
      <th>Name</th>
      <th>Type</th>
    </tr>
  </thead>
  
  <tbody>
    <tr>
      <td>07.12.2020</td>
      <td>5</td>
      <td>Robert A. Crane</td>
      <td>Repair</td>
    </tr>

    <tr>
      <td>07.12.2020</td>
      <td>5</td>
      <td>Robert A. Crane</td>
      <td>Repair</td>
    </tr>

    <tr>
      <td>07.12.2020</td>
      <td>22</td>
      <td>Loretta Acosta</td>
      <td>Repair</td>
    </tr>

    <tr>
      <td>07.12.2020</td>
      <td>22</td>
      <td>Loretta Acosta</td>
      <td>Repair</td>
    </tr>

    <tr>
      <td>07.12.2020</td>
      <td>22</td>
      <td>Loretta Acosta</td>
      <td>Repair</td>
    </tr>
    </tbody>
  </table>

因此，应选择 ID 值为 5 的第一行和 ID 为 22 的第一行。

它应该如下所示：

    <table>
      <thead>
        <tr>
          <th>Date</th>
          <th>ID</th>
          <th>Name</th>
          <th>Type</th>
        </tr>
      </thead>

      <tbody>
        <tr style="background:yellow">
          <td>07.12.2020</td>
          <td>5</td>
          <td>Robert A. Crane</td>
          <td>Repair</td>
        </tr>

        <tr>
          <td>07.12.2020</td>
          <td>5</td>
          <td>Robert A. Crane</td>
          <td>Repair</td>
        </tr>

        <tr style="background:yellow">
          <td>07.12.2020</td>
          <td>22</td>
          <td>Loretta Acosta</td>
          <td>Repair</td>
        </tr>

        <tr>
          <td>07.12.2020</td>
          <td>22</td>
          <td>Loretta Acosta</td>
          <td>Repair</td>
        </tr>

        <tr>
          <td>07.12.2020</td>
          <td>22</td>
          <td>Loretta Acosta</td>
          <td>Repair</td>
        </tr>
        </tbody>
      </table>

注意：有些人在没有回答这个问题或没有写出问题解决方案的链接的情况下给出负面评价。如果您回答问题而不是减分，那将不胜感激。

标签： jquery

解决方案

这是问题的答案：

  jQuery(document).ready(function ($) {

    $("table > tbody").children('tr:first').css("background-color", "#ffff00");
  
    var column_id = $("table > tbody").children('tr:first').find('td').eq(1).text();
    $('table > tbody > tr').each(function() {
      if (column_id != $(this).find('td').eq(1).text()) {
        $(this).css("background-color", "#ffff00");
        column_id = $(this).find('td').eq(1).text();
      }
    });
  });
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="script.js"></script>

    <table>
      <thead>
        <tr>
          <th>Date</th>
          <th>ID</th>
          <th>Name</th>
          <th>Type</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>07.12.2020</td>
          <td>5</td>
          <td>Robert A. Crane</td>
          <td>Repair</td>
        </tr>

        <tr>
          <td>07.12.2020</td>
          <td>5</td>
          <td>Robert A. Crane</td>
          <td>Repair</td>
        </tr>

        <tr>
          <td>07.12.2020</td>
          <td>22</td>
          <td>Loretta Acosta</td>
          <td>Repair</td>
        </tr>

        <tr>
          <td>07.12.2020</td>
          <td>22</td>
          <td>Loretta Acosta</td>
          <td>Repair</td>
        </tr>

        <tr>
          <td>07.12.2020</td>
          <td>22</td>
          <td>Loretta Acosta</td>
          <td>Repair</td>
        </tr>
        </tbody>
      </table>

  </body>
</html>

推荐阅读