使用 javascript 和 HTML 的表格布局

Question

我是 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>

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

Answer 1

您刚刚在 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>

Answer 2

你有两个tbody元素，但是var tbody = document.querySelector('tbody'); 只得到第一个。 你需要得到它们并循环它们。