使用表主类在 tr 之间获取表中的所有 tr 并推入数组
Posted
技术标签:
【中文标题】使用表主类在 tr 之间获取表中的所有 tr 并推入数组【英文标题】：Get all tr in table between tr with table-primary class and push in array 【发布时间】：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 元素的数组似乎是多余的。不过取决于您的用例。
这些数组有什么用？更详细地解释用例会有所帮助
【参考方案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>【讨论】：
以上是关于使用表主类在 tr 之间获取表中的所有 tr 并推入数组的主要内容，如果未能解决你的问题，请参考以下文章