我是新人，仍在學習：我已經創建了 HTML 表格，但布局有問題。當我復制表格時，它會弄亂我的布局，看看編號為 2 的表格，表格應該看起來相同：第二個表格應該看起來像表格編號 1var 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}有人能幫我解決這個問題嗎？
2 回答
汪汪一只貓
TA貢獻1898條經驗 獲得超8個贊
您剛剛在 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>
尚方寶劍之說
TA貢獻1788條經驗 獲得超4個贊
您有兩個tbody元素，但var tbody = document.querySelector('tbody');只獲取第一個。您需要將它們全部獲取并循環遍歷它們。
- 2 回答
- 0 關注
- 133 瀏覽
添加回答
舉報
0/150
提交
取消