javascript - 带空字段的HTML表

我目前有一个只有标题的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)

    })

最佳答案

添加一个内部有5个空白<tr>的新<td>（每行要添加一次）：

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