CODEWITHSUNDEEP
javascripthtmlcssstringfunction
stackoverflown
stackoverflown

Reputation: 139

HTML Table with empty fields

I've currently got a HTML table with only headers till input is added, i want to create a table with clear rows which can then be populated once data is added in. Any suggestions/help would be appreciated on how i would go about doing this.

Current Table;

Desired Table;

enter image description here

Table code;

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

This is how i am added data to the table;

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)

    })

Upvotes: 2

Views: 2218

Answers (2)

Jack Bashford
Jack Bashford

Reputation: 44107

You can - just loop and add however many rows and columns you want:

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>

Upvotes: 2

Jeremy Blalock
Jeremy Blalock

Reputation: 2619

Add a new <tr> with 5 empty <td>'s inside (once per row you want to add):

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

Upvotes: 2

Related Questions