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

添加一个新的<tr>，其中有5个空的<td>（每行要添加一次）：

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

Answer 2

您可以-只需循环并添加所需的许多行和列：

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>

带空字段的HTML表

2 个答案: