带空字段的HTML表

时间:2019-02-27 22:24:36

标签: javascript html css string function

我目前有一个只有标题的HTML表,直到添加输入为止,我想创建一个具有清晰行的表,一旦添加数据,就可以填充该行。任何建议/帮助都将对我有帮助去做吧。

当前表;

所需表;

enter image description here

表格代码;

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

    })

2 个答案:

答案 0 :(得分:2)

添加一个新的<tr>,其中有5个空的<td>(每行要添加一次):

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

答案 1 :(得分: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>