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

使用 javascript 和 HTML 进行表格布局

首页 猿问 使用 javascript 和...

使用 javascript 和 HTML 进行表格布局

Html5
繁星淼淼 2023-09-18 16:01:06
我是新人，仍在学习：我已经创建了 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>


查看完整回答
反对 回复 2023-09-18
?
尚方宝剑之说

TA贡献1788条经验 获得超4个赞

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



查看完整回答
反对 回复 2023-09-18
  • 2 回答
  • 0 关注
  • 62 浏览

添加回答

了解更多

举报

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