为了账号安全，请及时绑定邮箱和手机立即绑定

使用 javascript 和 HTML 的表格布局

首页 猿问 使用 javascript 和...

使用 javascript 和 HTML 的表格布局

JavaScript
繁星coding 2022-05-22 15:47:14
我是 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}
查看完整描述

2 回答

?
江户川乱折腾

TA贡献1851条经验 获得超5个赞

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


查看完整回答
反对 回复 2022-05-22
?
幕布斯7119047

TA贡献1794条经验 获得超8个赞

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



查看完整回答
反对 回复 2022-05-22
  • 2 回答
  • 0 关注
  • 92 浏览
慕课专栏
更多

添加回答

了解更多

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信