使用 javascript 和 HTML 进行表格布局

Question

我是新人，仍在学习：我已经创建了 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

}

有人能帮我解决这个问题吗？

Answer 1

您刚刚在 Javascript 代码中使用了第一个 tbody。让我们试试这个。var tbody = document.querySelectorAll('tbody');tbody.forEach(function(bdy){&nbsp; &nbsp; let thscoped = bdy.querySelector('.sem');&nbsp; &nbsp; var count = 0;&nbsp; &nbsp; for (var ch = bdy.firstChild; ch; ch = ch.nextSibling)&nbsp; &nbsp; &nbsp; if (ch instanceof HTMLElement) count++;&nbsp; &nbsp; thscoped.setAttribute("rowspan", count);});.sem {&nbsp; &nbsp; &nbsp;border:1px solid red}<div class="table-responsive">&nbsp; <table class="responsive-table&nbsp; table-bordered ">&nbsp; &nbsp; <thead>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <th scope="col">Year</th>&nbsp; &nbsp; &nbsp; &nbsp; <th scope="col">Short</th>&nbsp; &nbsp; &nbsp; &nbsp; <th scope="col">Exam</th>&nbsp; &nbsp; &nbsp; &nbsp; <th scope="col">P</th>&nbsp; &nbsp; &nbsp; &nbsp; <th scope="col">S</th>&nbsp; &nbsp; &nbsp; &nbsp; <th scope="col">A</th>&nbsp; &nbsp; &nbsp; &nbsp; <th scope="col">SJ</th>&nbsp; &nbsp; &nbsp; &nbsp; <th scope="col">TJ</th>&nbsp; &nbsp; &nbsp; &nbsp; <th scope="col">PK</th>&nbsp; &nbsp; &nbsp; &nbsp; <th scope="col">ECTS</th>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; </thead>&nbsp; &nbsp; <tbody>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <th class="sem" scope="row">1</th>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="Short">Lor</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="Exam">Lorem</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="P">4</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="S">4</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="A">0</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="SJ">0</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="TJ">0</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="PK">0</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="ECTS">0</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="Short">MATM</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="Exam">Lorem (1/2)</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="P">4</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="S">4</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="A">0</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="SJ">0</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="TJ">0</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="PK">0</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="ECTS">0</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="Short">MATM</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="Exam">Lorem (1/2)</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="P">4</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="S">4</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="A">0</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="SJ">0</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="TJ">0</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="PK">0</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="ECTS">0</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="Short">MATM</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="Exam">Lorem</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="P">4</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="S">4</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="A">0</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="SJ">0</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="TJ">0</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="PK">0</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="ECTS">0</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="Short">MATM</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="Exam">Lorem (1/2)&nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="P">4</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="S">4</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="A">0</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="SJ">0</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="TJ">0</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="PK">0</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="ECTS">0</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="Short">MATM</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="Exam">Lorem (1/2)</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="P">4</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="S">4</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="A">0</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="SJ">0</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="TJ">0</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="PK">0</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="ECTS">0</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="Short">MATM</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="Exam">Lorem (1/2)</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="P">4</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="S">4</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="A">0</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="SJ">0</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="TJ">0</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="PK">0</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="ECTS">0</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="Short">-</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="Exam">Lorem: 1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="P">-</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="S">-</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="A">-</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="SJ">-</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="TJ">-</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="PK">-</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="ECTS">-&nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="Short">-</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="Exam">Lorem: 1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="P">-</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="S">-</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="A">-</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="SJ">-</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="TJ">-</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="PK">-</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="ECTS">-&nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; </tbody>&nbsp; </table></div><div class="table-responsive">&nbsp; <table class="responsive-table&nbsp; table-bordered ">&nbsp; &nbsp; <thead>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <th scope="col">Year</th>&nbsp; &nbsp; &nbsp; &nbsp; <th scope="col">Short</th>&nbsp; &nbsp; &nbsp; &nbsp; <th scope="col">Exam</th>&nbsp; &nbsp; &nbsp; &nbsp; <th scope="col">P</th>&nbsp; &nbsp; &nbsp; &nbsp; <th scope="col">S</th>&nbsp; &nbsp; &nbsp; &nbsp; <th scope="col">A</th>&nbsp; &nbsp; &nbsp; &nbsp; <th scope="col">SJ</th>&nbsp; &nbsp; &nbsp; &nbsp; <th scope="col">TJ</th>&nbsp; &nbsp; &nbsp; &nbsp; <th scope="col">PK</th>&nbsp; &nbsp; &nbsp; &nbsp; <th scope="col">ECTS</th>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; </thead>&nbsp; &nbsp; <tbody>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <th class="sem" scope="row">1</th>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="Short">Lor</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="Exam">Lorem</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="P">4</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="S">4</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="A">0</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="SJ">0</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="TJ">0</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="PK">0</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="ECTS">0</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="Short">MATM</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="Exam">Lorem (1/2)</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="P">4</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="S">4</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="A">0</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="SJ">0</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="TJ">0</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="PK">0</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="ECTS">0</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="Short">MATM</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="Exam">Lorem (1/2)</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="P">4</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="S">4</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="A">0</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="SJ">0</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="TJ">0</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="PK">0</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="ECTS">0</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="Short">MATM</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="Exam">Lorem</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="P">4</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="S">4</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="A">0</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="SJ">0</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="TJ">0</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="PK">0</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="ECTS">0</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="Short">MATM</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="Exam">Lorem (1/2)&nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="P">4</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="S">4</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="A">0</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="SJ">0</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="TJ">0</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="PK">0</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="ECTS">0</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="Short">MATM</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="Exam">Lorem (1/2)</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="P">4</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="S">4</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="A">0</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="SJ">0</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="TJ">0</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="PK">0</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="ECTS">0</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="Short">MATM</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="Exam">Lorem (1/2)</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="P">4</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="S">4</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="A">0</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="SJ">0</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="TJ">0</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="PK">0</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="ECTS">0</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="Short">-</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="Exam">Lorem: 1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="P">-</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="S">-</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="A">-</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="SJ">-</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="TJ">-</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="PK">-</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="ECTS">-&nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="Short">-</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="Exam">Lorem: 1</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="P">-</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="S">-</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="A">-</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="SJ">-</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="TJ">-</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="PK">-</td>&nbsp; &nbsp; &nbsp; &nbsp; <td data-title="ECTS">-&nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; </tbody>&nbsp; </table></div>

Answer 2

您有两个tbody元素，但var tbody = document.querySelector('tbody');只获取第一个。您需要将它们全部获取并循环遍历它们。