如何使用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(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>

相关内容

最新更新

热门标签：