Jquery - 在复选框单击时按类查找最接近的前一个 <tr>。复选框位于 <td> 内

Posted

技术标签:

【中文标题】Jquery - 在复选框单击时按类查找最接近的前一个 <tr>。复选框位于 <td> 内【英文标题】：Jquery - Find closest previous <tr> by class at checkbox clicking. the checkbox is inside a <td> 【发布时间】：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 的方法 【参考方案1】：

您可以使用.prevAll() 来做到这一点：

$(document).on('change', '.form-check-input', function() 
  console.log($(this).closest('tr').prevAll('.table-primary').first().text())
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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> 
      </tbody>
    </table>
  </div>

【讨论】：

我赞成这篇文章，比我的方法更好，大约需要 1 小时。【参考方案2】：

你需要使用parent函数，并在循环prev元素后，运行hasClass函数满足条件并访问后命名类。

$("input[type='checkbox']").click(function()
  
  if($(this).is(":checked") && $(this).parent().parent().parent().is("tbody"))
  
  let p = $(this).parent().parent();
  
  while(!$(p).hasClass("table-primary"))
  
    p = $(p).prev();
    
    
    
  
  
  console.log($(p).children(".name").text());
  
  
  
  

);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <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>
            <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> 
      </tbody>
    </table>
  </div>

【讨论】：

以上是关于Jquery - 在复选框单击时按类查找最接近的前一个 <tr>。复选框位于 <td> 内的主要内容，如果未能解决你的问题，请参考以下文章

在jQuery中获取最接近元素的形式

PHP DOM 解析器在循环时按类获取特定文本

使用 jQuery 从单击的元素中获取最接近的输入值

在最接近指定日期的列表中查找上一个日期

在排序数组列表中查找2个最接近的先前值和2个最接近的下一个值

使用 jquery 查找最近的 id