HTML таблица с пустыми полями

Question

В настоящее время у меня есть HTML-таблица с только заголовками до добавления ввода, я хочу создать таблицу с четкими строками, которые затем можно будет заполнить после добавления данных. Любые предложения / помощь будут оценены по поводу того, как я будупродолжайте делать это.

Текущая таблица;

Желаемая таблица;

Код таблицы;

       <div>
          <table id="requestContents">
              <colgroup>
                  <col style="width: 128px">
                  <col style="width: 136px">
                  <col style="width: 84px">
                  <col style="width: 113px">
                  <col style="width: 123px">
              </colgroup>
              <tr>
                  <th>Request ID</th>
                  <th>Request Type</th>
                  <th>Blood Type</th>
                  <th>Notice</th>
                  <th>Request Date</th>
              </tr>
          </table>
      </div>

Так я добавляю данные в таблицу;

ipcRenderer.on('Request:DonorInformation', function(event, requestType, bloodType, Notice) {

      var datetime = currentdate.getDate() + "/"
                + (currentdate.getMonth()+1)  + "/"
                + currentdate.getFullYear() + "   "
                + currentdate.getHours() + ":"
                + currentdate.getMinutes()

      var table = document.getElementById("requestContents");

      const createRow = document.createElement('tr')
      const requestIDAdd = document.createElement('td')
      const requestTypeAdd = document.createElement('td')
      const bloodTypeAdd = document.createElement('td')
      const noticeAdd = document.createElement('td')
      const dateAdd = document.createElement('td')

      const requestID = document.createTextNode(" ")
      const requestTypeText = document.createTextNode(requestType)
      const bloodTypeText = document.createTextNode(bloodType)
      const NoticeText = document.createTextNode(Notice)
      const dateText = document.createTextNode(datetime)

      requestIDAdd.appendChild(requestID)
      requestTypeAdd.appendChild(requestTypeText)
      bloodTypeAdd.appendChild(bloodTypeText)
      noticeAdd.appendChild(NoticeText)
      dateAdd.appendChild(dateText)

      createRow.appendChild(requestIDAdd)
      createRow.appendChild(requestTypeAdd)
      createRow.appendChild(bloodTypeAdd)
      createRow.appendChild(noticeAdd)
      createRow.appendChild(dateAdd)

      table.appendChild(createRow)

    })

Answer 1

Вы можете - просто зациклите и добавьте столько строк и столбцов, сколько захотите:

var addRows = 3;
var columns = 5;
var table = document.getElementById("requestContents");
for (var i = 0; i < addRows; i++) {
  let row = document.createElement("tr");
  for (var j = 0; j < columns; j++) {
    let cell = document.createElement("td");
    row.appendChild(cell);
  }
  table.appendChild(row);
}

<div>
  <table id="requestContents" border="1">
    <colgroup>
      <col style="width: 128px">
      <col style="width: 136px">
      <col style="width: 84px">
      <col style="width: 113px">
      <col style="width: 123px">
    </colgroup>
    <tr>
      <th>Request ID</th>
      <th>Request Type</th>
      <th>Blood Type</th>
      <th>Notice</th>
      <th>Request Date</th>
    </tr>
  </table>
</div>

Answer 2

Добавить новый <tr> с 5 пустыми <td> внутри (один раз в строку, которую вы хотите добавить):

<table>
  ...
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>