javascript - 如何在 HTML 表格中获得这样的布局-6ren

javascript - 如何在 HTML 表格中获得这样的布局

转载作者：行者123 更新时间：2023-11-28 03:10:31

我制作了一个简单的响应式 HTML 表格，我正在尝试获得如下图所示的布局:

正如您所看到的，我的问题出在这个年份列上。现在我需要粘贴空:

 <th scope="row"></th>

由于这个空的 HTML 标签，整个列都有边框。

是否可以得到如图所示的布局，这也是我的 HTML:

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

                <th scope="row"></th>
                <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>

                <th scope="row"></th>
                <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>

                <th scope="row"></th>
                <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>

                <th scope="row"></th>
                <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>

                <th scope="row"></th>
                <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>

                <th scope="row"></th>
                <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>

                <th class="sem" scope="row"></th>
                <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>

                <th scope="row"></th>
                <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>

这是我的 jsfiddle:https://jsfiddle.net/r6jqvk4s/1/

最佳答案

您可以使用 javascript 对 tr 子项进行计数，然后插入包含找到的计数值的 rowspan 属性:

var tbody = document.querySelector('tbody');// look for tbody
var thscoped = document.querySelector('tbody .sem');// look for the th.sem inside tbody
var count = 0;
for (var ch = tbody.firstChild; ch; ch = ch.nextSibling)// will find tr
  if (ch instanceof HTMLElement) count++; // will count them

thscoped.setAttribute("rowspan", count); // insert the rowspan attribute once count is done

/* SEE ME */
.sem {border:solid;}

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