获取 tr 与 table-primary class 之间的 table 中的所有 tr 并推入数组

Question

点击按钮#create-arrays 我需要创建多个数组。每个数组将包含两个 tr（上一个和下一个）之间存在的 tr（不是 .table-primary）的集合，class table 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];
        }
    })

Answer 1

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

您可以检查每一行（代码段中的 element）是否存在 table-primary class。如果该行有这个 class，您就知道您必须创建一个新组。

这是一个普通的 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>

获取 tr 与 table-primary class 之间的 table 中的所有 tr 并推入数组

Get all tr in table between tr with table-primary class and push in array

html

javascript

arrays

jquery

html-table