Макет таблицы с javascript и HTML - PullRequest
Новая
       0

Макет таблицы с javascript и HTML

0 голосов
/ 17 марта 2020

Я новичок в 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>

Кто-нибудь может мне помочь с этим?

Ответы [ 2 ]

2 голосов
/ 17 марта 2020

Вы только что работали с первым телом по вашему Javascript коду. Давайте попробуем это. 

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>
1 голос
/ 17 марта 2020

У вас есть два tbody элемента, но var tbody = document.querySelector('tbody'); получает только первый. Тебе нужно получить их все и я oop над ними.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...