【发布时间】:2021-08-31 11:12:44
【问题描述】:
我需要找到包含输入(“复选框”)的 td 的前一个和最近的元素(“.table-primary”)。
如果我选中“David”行内的复选框,它应该会找到“Patricia”行元素。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<table class="table table-sm">
<thead>
<tr>
<th scope="col" style="max-width: 36px;"></th>
<th scope="col">Name</th>
<th scope="col">Surname</th>
<th scope="col">Work</th>
<th scope="col">Country</th>
<th scope="col">Birthday</th>
<th scope="col">Hobbyes</th>
</tr>
</thead>
<tbody>
<tr class="table-primary">
<td class="docRow"><input class="form-check-input" type="checkbox"></td>
<td class="name">Mark</td>
<td class="surname">White</td>
<td class="work">Lawyer</td>
<td class="country">USA</td>
<td class="birthday">26/05/1993</td>
<td class="hobbyes">Tennis, Music</td>
</tr>
<tr>
<td class="fileRow"><input class="form-check-input" type="checkbox"></td>
<td class="childname">Laura</td>
<td class="childage">5</td>
<td colspan="4"></td>
</tr>
<tr>
<td class="fileRow"><input class="form-check-input" type="checkbox"></td>
<td class="childname">Maurice</td>
<td class="childage">10</td>
<td colspan="4"></td>
</tr>
<tr>
<td class="fileRow"><input class="form-check-input" type="checkbox"></td>
<td class="childname">Bryan</td>
<td class="childage">2</td>
<td colspan="4"></td>
</tr>
<tr class="table-primary">
<td class="docRow"><input class="form-check-input" type="checkbox"></td>
<td class="name">Patricia</td>
<td class="surname">Mallon</td>
<td class="work">Manager</td>
<td class="country">Germany</td>
<td class="birthday">05/07/1976</td>
<td class="hobbyes">Mode, Cooking, Reading</td>
</tr>
<tr>
<td class="fileRow"><input class="form-check-input" type="checkbox"></td>
<td class="childname">David</td>
<td class="childage">8</td>
<td colspan="4"></td>
</tr>
<tr class="table-primary">
<td class="docRow"><input class="form-check-input" type="checkbox"></td>
<td class="name">Wuei</td>
<td class="surname">Zong</td>
<td class="work">Marketing</td>
<td class="country">China</td>
<td class="birthday">01/01/1945</td>
<td class="hobbyes">Bricolage, Manual Work, Sleep</td>
</tr>
<tr>
<tr>
<td class="fileRow"><input class="form-check-input" type="checkbox"></td>
<td class="childname">Philips</td>
<td class="childage">12</td>
<td colspan="4"></td>
</tr>
<tr>
<td class="fileRow"><input class="form-check-input" type="checkbox"></td>
<td class="childname">Alice</td>
<td class="childage">22</td>
<td colspan="4"></td>
</tr>
</tr>
</tbody>
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4"
crossorigin="anonymous"></script>
</body>
</html>
我已经尝试过使用最接近()和上一个()。但它似乎不起作用,我不明白为什么。
【问题讨论】:
-
你试过的代码是什么?可能只是一个简单的错字。什么没用?活动开了吗?您是否将其添加为事件?
$(this).closest("tr").prev()会在复选框事件中为您提供 Patricia 行 -
他想得到最近的
tr类.table-primary,而不是前一个tr。 -
您的最后两行似乎在另一行内
-
感谢大家的回答,@freedomn-m 在发布了我按照您建议的方式解决的问题后。
-
请注意,
.prev()始终位于前一行。如果你想要前面的“父”/“标题”/“主”行,那么你需要@CuongLeNgoc 的方法
标签: javascript html jquery checkbox html-table