使用表主类在 tr 之间获取表中的所有 tr 并推入数组答案

【问题标题】：Get all tr in table between tr with table-primary class and push in array使用表主类在 tr 之间获取表中的所有 tr 并推入数组
【发布时间】：2021-09-14 07:53:27
【问题描述】：

点击按钮#create-arrays 我需要创建多个数组。每个数组将包含存在于两个 tr （前一个和下一个）之间的一组 tr （不是 .table-primary），具有类表 primary。这组 tr 将被称为上下文。使用 jquery，我如何识别任何此类上下文并将其放入数组中？感谢所有愿意提供帮助的人。

HTML 部分（用于测试）：

<!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.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  </head>
  <body>
    <table class="table table-sm">
      <thead>
        
      </thead>
      <tbody>
        <tr class="table-primary">
          <td colspan="2">Group 1</td>
        </tr>
        <tr>
          <td>Name: Jonh</td>
          <td>Surname: Doe</td>
        </tr>
        <tr>
          <td>Name: Mark</td>
          <td>Surname: Lon</td>
        </tr>
        <tr class="table-primary">
          <td colspan="2">Group 2</td>
        </tr>
        <tr>
          <td>Name: Will</td>
          <td>Surname: Man</td>
        </tr>
        <tr>
          <td>Name: Ben</td>
          <td>Surname: Harper</td>
        </tr>
        <tr>
          <td>Name: Mitch</td>
          <td>Surname: Collins</td>
        </tr>
        <tr class="table-primary">
          <td colspan="2">Group 3</td>
        </tr>
        <tr>
          <td>Name: Serena</td>
          <td>Surname: Mellin</td>
        </tr>
        <tr class="table-primary">
          <td colspan="2">Group 4</td>
        </tr>
        <tr>
          <td>Name: Nickolas</td>
          <td>Surname: Malinof</td>
        </tr>
        <tr>
          <td>Name: David</td>
          <td>Surname: Benner</td>
        </tr>
        <tr>
          <td>Name: Lenny</td>
          <td>Surname: Doe</td>
        </tr>
        <tr>
          <td>Name: Micheal</td>
          <td>Surname: Pitzford</td>
        </tr>
        <tr>
          <td>Name: Melania</td>
          <td>Surname: Bebant</td>
        </tr>
      </tbody>
    </table>    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  </body>
</html>

我用来获取 tbody 中所有 tr 的 jquery 脚本。

$('#create-arrays').on('click', function(){

    var context = [];
    var a = $('#file_table_available tbody tr');
    console.log(a);
        for (let i = 0; i < a.length; i++) {
            const element = a[i];
        }
    })

【问题讨论】：

$('tr:not('.table-primary') 将创建一个 jQuery 对象，其中包含您要定位的元素。如果你需要从那里创建一个数组，你可以从那里使用map()，但是当你已经有 jQuery 对象可以使用时，从 jQuery 对象创建一个 tr 元素的数组似乎是多余的。不过取决于您的用例。
这些数组有什么用？更详细地解释用例会有所帮助

标签： javascript html jquery arrays html-table

【解决方案1】：

您已经开始循环遍历表中的所有行了。

您可以检查每一行（您的 sn-p 中的element）是否存在table-primary 类。如果该行有此类，您知道您必须创建一个新组。

这是一个普通的 javascript 示例。它输出一组组。每个组包含 1 个或多个属于一起的行。

const rows = document.querySelectorAll("tr");

const groups = [];
let group = null;

for (const row of rows) {
  if (row.classList.contains("table-primary")) {
    group = [];
    groups.push(group);
  } else {
    group.push(row);
  }
}

console.log(groups);

<table class="table table-sm">
  <thead>

  </thead>
  <tbody>
    <tr class="table-primary">
      <td colspan="2">Group 1</td>
    </tr>
    <tr>
      <td>Name: Jonh</td>
      <td>Surname: Doe</td>
    </tr>
    <tr>
      <td>Name: Mark</td>
      <td>Surname: Lon</td>
    </tr>
    <tr class="table-primary">
      <td colspan="2">Group 2</td>
    </tr>
    <tr>
      <td>Name: Will</td>
      <td>Surname: Man</td>
    </tr>
    <tr>
      <td>Name: Ben</td>
      <td>Surname: Harper</td>
    </tr>
    <tr>
      <td>Name: Mitch</td>
      <td>Surname: Collins</td>
    </tr>
    <tr class="table-primary">
      <td colspan="2">Group 3</td>
    </tr>
    <tr>
      <td>Name: Serena</td>
      <td>Surname: Mellin</td>
    </tr>
    <tr class="table-primary">
      <td colspan="2">Group 4</td>
    </tr>
    <tr>
      <td>Name: Nickolas</td>
      <td>Surname: Malinof</td>
    </tr>
    <tr>
      <td>Name: David</td>
      <td>Surname: Benner</td>
    </tr>
    <tr>
      <td>Name: Lenny</td>
      <td>Surname: Doe</td>
    </tr>
    <tr>
      <td>Name: Micheal</td>
      <td>Surname: Pitzford</td>
    </tr>
    <tr>
      <td>Name: Melania</td>
      <td>Surname: Bebant</td>
    </tr>
  </tbody>
</table>

【讨论】：