javascript - 使用 javascript 和 HTML 的表格布局
问题描述
我是 Stackoverflow 的新手,仍在学习:我创建了 HTML 表格,但布局有问题。当我复制表格时,它会打乱我的布局,查看编号为 2 的表格,表格应该看起来相同:第二个表格应该看起来像 1 号表格
var tbody = document.querySelector('tbody');
var thscoped = document.querySelector('tbody .sem');
var count = 0;
for (var ch = tbody.firstChild; ch; ch = ch.nextSibling)
if (ch instanceof HTMLElement) count++;
thscoped.setAttribute("rowspan", count);
.sem {
border:1px solid red
}
<div class="table-responsive">
<table class="responsive-table table-bordered ">
<thead>
<tr>
<th scope="col">Year</th>
<th scope="col">Short</th>
<th scope="col">Exam</th>
<th scope="col">P</th>
<th scope="col">S</th>
<th scope="col">A</th>
<th scope="col">SJ</th>
<th scope="col">TJ</th>
<th scope="col">PK</th>
<th scope="col">ECTS</th>
</tr>
</thead>
<tbody>
<tr>
<th class="sem" scope="row">1</th>
<td data-title="Short">Lor</td>
<td data-title="Exam">Lorem</td>
<td data-title="P">4</td>
<td data-title="S">4</td>
<td data-title="A">0</td>
<td data-title="SJ">0</td>
<td data-title="TJ">0</td>
<td data-title="PK">0</td>
<td data-title="ECTS">0</td>
</tr>
<tr>
<td data-title="Short">MATM</td>
<td data-title="Exam">Lorem (1/2)</td>
<td data-title="P">4</td>
<td data-title="S">4</td>
<td data-title="A">0</td>
<td data-title="SJ">0</td>
<td data-title="TJ">0</td>
<td data-title="PK">0</td>
<td data-title="ECTS">0</td>
</tr>
<tr>
<td data-title="Short">MATM</td>
<td data-title="Exam">Lorem (1/2)</td>
<td data-title="P">4</td>
<td data-title="S">4</td>
<td data-title="A">0</td>
<td data-title="SJ">0</td>
<td data-title="TJ">0</td>
<td data-title="PK">0</td>
<td data-title="ECTS">0</td>
</tr>
<tr>
<td data-title="Short">MATM</td>
<td data-title="Exam">Lorem</td>
<td data-title="P">4</td>
<td data-title="S">4</td>
<td data-title="A">0</td>
<td data-title="SJ">0</td>
<td data-title="TJ">0</td>
<td data-title="PK">0</td>
<td data-title="ECTS">0</td>
</tr>
<tr>
<td data-title="Short">MATM</td>
<td data-title="Exam">Lorem (1/2)
</td>
<td data-title="P">4</td>
<td data-title="S">4</td>
<td data-title="A">0</td>
<td data-title="SJ">0</td>
<td data-title="TJ">0</td>
<td data-title="PK">0</td>
<td data-title="ECTS">0</td>
</tr>
<tr>
<td data-title="Short">MATM</td>
<td data-title="Exam">Lorem (1/2)</td>
<td data-title="P">4</td>
<td data-title="S">4</td>
<td data-title="A">0</td>
<td data-title="SJ">0</td>
<td data-title="TJ">0</td>
<td data-title="PK">0</td>
<td data-title="ECTS">0</td>
</tr>
<tr>
<td data-title="Short">MATM</td>
<td data-title="Exam">Lorem (1/2)</td>
<td data-title="P">4</td>
<td data-title="S">4</td>
<td data-title="A">0</td>
<td data-title="SJ">0</td>
<td data-title="TJ">0</td>
<td data-title="PK">0</td>
<td data-title="ECTS">0</td>
</tr>
<tr>
<td data-title="Short">-</td>
<td data-title="Exam">Lorem: 1</td>
<td data-title="P">-</td>
<td data-title="S">-</td>
<td data-title="A">-</td>
<td data-title="SJ">-</td>
<td data-title="TJ">-</td>
<td data-title="PK">-</td>
<td data-title="ECTS">-
</td>
</tr>
<tr>
<td data-title="Short">-</td>
<td data-title="Exam">Lorem: 1</td>
<td data-title="P">-</td>
<td data-title="S">-</td>
<td data-title="A">-</td>
<td data-title="SJ">-</td>
<td data-title="TJ">-</td>
<td data-title="PK">-</td>
<td data-title="ECTS">-
</td>
</tr>
</tbody>
</table>
</div>
<div class="table-responsive">
<table class="responsive-table table-bordered ">
<thead>
<tr>
<th scope="col">Year</th>
<th scope="col">Short</th>
<th scope="col">Exam</th>
<th scope="col">P</th>
<th scope="col">S</th>
<th scope="col">A</th>
<th scope="col">SJ</th>
<th scope="col">TJ</th>
<th scope="col">PK</th>
<th scope="col">ECTS</th>
</tr>
</thead>
<tbody>
<tr>
<th class="sem" scope="row">1</th>
<td data-title="Short">Lor</td>
<td data-title="Exam">Lorem</td>
<td data-title="P">4</td>
<td data-title="S">4</td>
<td data-title="A">0</td>
<td data-title="SJ">0</td>
<td data-title="TJ">0</td>
<td data-title="PK">0</td>
<td data-title="ECTS">0</td>
</tr>
<tr>
<td data-title="Short">MATM</td>
<td data-title="Exam">Lorem (1/2)</td>
<td data-title="P">4</td>
<td data-title="S">4</td>
<td data-title="A">0</td>
<td data-title="SJ">0</td>
<td data-title="TJ">0</td>
<td data-title="PK">0</td>
<td data-title="ECTS">0</td>
</tr>
<tr>
<td data-title="Short">MATM</td>
<td data-title="Exam">Lorem (1/2)</td>
<td data-title="P">4</td>
<td data-title="S">4</td>
<td data-title="A">0</td>
<td data-title="SJ">0</td>
<td data-title="TJ">0</td>
<td data-title="PK">0</td>
<td data-title="ECTS">0</td>
</tr>
<tr>
<td data-title="Short">MATM</td>
<td data-title="Exam">Lorem</td>
<td data-title="P">4</td>
<td data-title="S">4</td>
<td data-title="A">0</td>
<td data-title="SJ">0</td>
<td data-title="TJ">0</td>
<td data-title="PK">0</td>
<td data-title="ECTS">0</td>
</tr>
<tr>
<td data-title="Short">MATM</td>
<td data-title="Exam">Lorem (1/2)
</td>
<td data-title="P">4</td>
<td data-title="S">4</td>
<td data-title="A">0</td>
<td data-title="SJ">0</td>
<td data-title="TJ">0</td>
<td data-title="PK">0</td>
<td data-title="ECTS">0</td>
</tr>
<tr>
<td data-title="Short">MATM</td>
<td data-title="Exam">Lorem (1/2)</td>
<td data-title="P">4</td>
<td data-title="S">4</td>
<td data-title="A">0</td>
<td data-title="SJ">0</td>
<td data-title="TJ">0</td>
<td data-title="PK">0</td>
<td data-title="ECTS">0</td>
</tr>
<tr>
<td data-title="Short">MATM</td>
<td data-title="Exam">Lorem (1/2)</td>
<td data-title="P">4</td>
<td data-title="S">4</td>
<td data-title="A">0</td>
<td data-title="SJ">0</td>
<td data-title="TJ">0</td>
<td data-title="PK">0</td>
<td data-title="ECTS">0</td>
</tr>
<tr>
<td data-title="Short">-</td>
<td data-title="Exam">Lorem: 1</td>
<td data-title="P">-</td>
<td data-title="S">-</td>
<td data-title="A">-</td>
<td data-title="SJ">-</td>
<td data-title="TJ">-</td>
<td data-title="PK">-</td>
<td data-title="ECTS">-
</td>
</tr>
<tr>
<td data-title="Short">-</td>
<td data-title="Exam">Lorem: 1</td>
<td data-title="P">-</td>
<td data-title="S">-</td>
<td data-title="A">-</td>
<td data-title="SJ">-</td>
<td data-title="TJ">-</td>
<td data-title="PK">-</td>
<td data-title="ECTS">-
</td>
</tr>
</tbody>
</table>
</div>
有人可以帮我吗?
解决方案
您刚刚在 Javascript 代码中使用了第一个 tbody。让我们试试这个。
var tbody = document.querySelectorAll('tbody');
tbody.forEach(function(bdy){
let thscoped = bdy.querySelector('.sem');
var count = 0;
for (var ch = bdy.firstChild; ch; ch = ch.nextSibling)
if (ch instanceof HTMLElement) count++;
thscoped.setAttribute("rowspan", count);
});
.sem {
border:1px solid red
}
<div class="table-responsive">
<table class="responsive-table table-bordered ">
<thead>
<tr>
<th scope="col">Year</th>
<th scope="col">Short</th>
<th scope="col">Exam</th>
<th scope="col">P</th>
<th scope="col">S</th>
<th scope="col">A</th>
<th scope="col">SJ</th>
<th scope="col">TJ</th>
<th scope="col">PK</th>
<th scope="col">ECTS</th>
</tr>
</thead>
<tbody>
<tr>
<th class="sem" scope="row">1</th>
<td data-title="Short">Lor</td>
<td data-title="Exam">Lorem</td>
<td data-title="P">4</td>
<td data-title="S">4</td>
<td data-title="A">0</td>
<td data-title="SJ">0</td>
<td data-title="TJ">0</td>
<td data-title="PK">0</td>
<td data-title="ECTS">0</td>
</tr>
<tr>
<td data-title="Short">MATM</td>
<td data-title="Exam">Lorem (1/2)</td>
<td data-title="P">4</td>
<td data-title="S">4</td>
<td data-title="A">0</td>
<td data-title="SJ">0</td>
<td data-title="TJ">0</td>
<td data-title="PK">0</td>
<td data-title="ECTS">0</td>
</tr>
<tr>
<td data-title="Short">MATM</td>
<td data-title="Exam">Lorem (1/2)</td>
<td data-title="P">4</td>
<td data-title="S">4</td>
<td data-title="A">0</td>
<td data-title="SJ">0</td>
<td data-title="TJ">0</td>
<td data-title="PK">0</td>
<td data-title="ECTS">0</td>
</tr>
<tr>
<td data-title="Short">MATM</td>
<td data-title="Exam">Lorem</td>
<td data-title="P">4</td>
<td data-title="S">4</td>
<td data-title="A">0</td>
<td data-title="SJ">0</td>
<td data-title="TJ">0</td>
<td data-title="PK">0</td>
<td data-title="ECTS">0</td>
</tr>
<tr>
<td data-title="Short">MATM</td>
<td data-title="Exam">Lorem (1/2)
</td>
<td data-title="P">4</td>
<td data-title="S">4</td>
<td data-title="A">0</td>
<td data-title="SJ">0</td>
<td data-title="TJ">0</td>
<td data-title="PK">0</td>
<td data-title="ECTS">0</td>
</tr>
<tr>
<td data-title="Short">MATM</td>
<td data-title="Exam">Lorem (1/2)</td>
<td data-title="P">4</td>
<td data-title="S">4</td>
<td data-title="A">0</td>
<td data-title="SJ">0</td>
<td data-title="TJ">0</td>
<td data-title="PK">0</td>
<td data-title="ECTS">0</td>
</tr>
<tr>
<td data-title="Short">MATM</td>
<td data-title="Exam">Lorem (1/2)</td>
<td data-title="P">4</td>
<td data-title="S">4</td>
<td data-title="A">0</td>
<td data-title="SJ">0</td>
<td data-title="TJ">0</td>
<td data-title="PK">0</td>
<td data-title="ECTS">0</td>
</tr>
<tr>
<td data-title="Short">-</td>
<td data-title="Exam">Lorem: 1</td>
<td data-title="P">-</td>
<td data-title="S">-</td>
<td data-title="A">-</td>
<td data-title="SJ">-</td>
<td data-title="TJ">-</td>
<td data-title="PK">-</td>
<td data-title="ECTS">-
</td>
</tr>
<tr>
<td data-title="Short">-</td>
<td data-title="Exam">Lorem: 1</td>
<td data-title="P">-</td>
<td data-title="S">-</td>
<td data-title="A">-</td>
<td data-title="SJ">-</td>
<td data-title="TJ">-</td>
<td data-title="PK">-</td>
<td data-title="ECTS">-
</td>
</tr>
</tbody>
</table>
</div>
<div class="table-responsive">
<table class="responsive-table table-bordered ">
<thead>
<tr>
<th scope="col">Year</th>
<th scope="col">Short</th>
<th scope="col">Exam</th>
<th scope="col">P</th>
<th scope="col">S</th>
<th scope="col">A</th>
<th scope="col">SJ</th>
<th scope="col">TJ</th>
<th scope="col">PK</th>
<th scope="col">ECTS</th>
</tr>
</thead>
<tbody>
<tr>
<th class="sem" scope="row">1</th>
<td data-title="Short">Lor</td>
<td data-title="Exam">Lorem</td>
<td data-title="P">4</td>
<td data-title="S">4</td>
<td data-title="A">0</td>
<td data-title="SJ">0</td>
<td data-title="TJ">0</td>
<td data-title="PK">0</td>
<td data-title="ECTS">0</td>
</tr>
<tr>
<td data-title="Short">MATM</td>
<td data-title="Exam">Lorem (1/2)</td>
<td data-title="P">4</td>
<td data-title="S">4</td>
<td data-title="A">0</td>
<td data-title="SJ">0</td>
<td data-title="TJ">0</td>
<td data-title="PK">0</td>
<td data-title="ECTS">0</td>
</tr>
<tr>
<td data-title="Short">MATM</td>
<td data-title="Exam">Lorem (1/2)</td>
<td data-title="P">4</td>
<td data-title="S">4</td>
<td data-title="A">0</td>
<td data-title="SJ">0</td>
<td data-title="TJ">0</td>
<td data-title="PK">0</td>
<td data-title="ECTS">0</td>
</tr>
<tr>
<td data-title="Short">MATM</td>
<td data-title="Exam">Lorem</td>
<td data-title="P">4</td>
<td data-title="S">4</td>
<td data-title="A">0</td>
<td data-title="SJ">0</td>
<td data-title="TJ">0</td>
<td data-title="PK">0</td>
<td data-title="ECTS">0</td>
</tr>
<tr>
<td data-title="Short">MATM</td>
<td data-title="Exam">Lorem (1/2)
</td>
<td data-title="P">4</td>
<td data-title="S">4</td>
<td data-title="A">0</td>
<td data-title="SJ">0</td>
<td data-title="TJ">0</td>
<td data-title="PK">0</td>
<td data-title="ECTS">0</td>
</tr>
<tr>
<td data-title="Short">MATM</td>
<td data-title="Exam">Lorem (1/2)</td>
<td data-title="P">4</td>
<td data-title="S">4</td>
<td data-title="A">0</td>
<td data-title="SJ">0</td>
<td data-title="TJ">0</td>
<td data-title="PK">0</td>
<td data-title="ECTS">0</td>
</tr>
<tr>
<td data-title="Short">MATM</td>
<td data-title="Exam">Lorem (1/2)</td>
<td data-title="P">4</td>
<td data-title="S">4</td>
<td data-title="A">0</td>
<td data-title="SJ">0</td>
<td data-title="TJ">0</td>
<td data-title="PK">0</td>
<td data-title="ECTS">0</td>
</tr>
<tr>
<td data-title="Short">-</td>
<td data-title="Exam">Lorem: 1</td>
<td data-title="P">-</td>
<td data-title="S">-</td>
<td data-title="A">-</td>
<td data-title="SJ">-</td>
<td data-title="TJ">-</td>
<td data-title="PK">-</td>
<td data-title="ECTS">-
</td>
</tr>
<tr>
<td data-title="Short">-</td>
<td data-title="Exam">Lorem: 1</td>
<td data-title="P">-</td>
<td data-title="S">-</td>
<td data-title="A">-</td>
<td data-title="SJ">-</td>
<td data-title="TJ">-</td>
<td data-title="PK">-</td>
<td data-title="ECTS">-
</td>
</tr>
</tbody>
</table>
</div>
推荐阅读
- powershell - OneDrive LastSignInTime 注册表到 DateTime 格式
- regex - 匹配字符串的最后一位
- python - 将字典的数据框列转换为基于键的新列
- python - 在python中创建一个字典,其中包含一个键和一个python中的值列表
- c# - C# Steamworks GetSteamID AccessViolationException
- python - 如何在 Flask 应用程序中获取代理方案?
- c# - 从类库加载页面时,为什么 blazor 会加载其他文件
- mysql - MySQL如何将两行合二为一
- r - 嵌套数据框中子集的平均值(R)
- vim - NERDTree 转到目录