javascript - 使用 javascript 和 HTML 进行表格布局

标签 javascript html css

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

关于javascript - 使用 javascript 和 HTML 进行表格布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60719359/

上一篇：javascript - 更改onclick事件

下一篇：javascript - 使用 session 进行简单登录时，页面重定向不适用于 Node Js 和 React JS

相关文章：

javascript - 模拟套接字事件如何使用接收到的模型数据更新相关 View ？

javascript - 如何使用 JavaScript 检测与麦克风连接的系统

javascript - 是否可以强制 div 占用屏幕的高度

javascript - 如何使用jQuery来防止空格键进入空格？

javascript - getBackgroundPage() 函数究竟返回什么？ (谷歌浏览器)

jquery - 我在哪里为我的自定义按钮添加 "onclick"

c# - 建立Youtube视频网格

javascript - 更改存储的 div ID 的样式

jquery - :has CSS pseudo class in Nokogiri

html - 使用 zindex 在主体下方隐藏页脚

©2024 IT工具网  联系我们