I need to find the previous and closest element (".table-primary") to the td that contain the input ("checkbox").
If i check the checkbox inside the "David" row it should find the "Patricia" row element.
<!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>
I have already tried using closest() e prev(). But it doesn't seem to work, I don't understand why.
Aucun commentaire:
Enregistrer un commentaire