Why Javascript is not creating tables properly?

Question

I am creating a program that connects to Firebase Realtime Database and displays the value in a table.

Her is my code:

var leadsRef = database.ref('leads/'+leadID);
var table = document.getElementById('remarksTable');

leadsRef.on('child_added', function(snapshot) {
  var remark = snapshot.val().remark;
  var timestamp = snapshot.val().timestamp;

  var row = document.createElement('tr');
  var rowData1 = document.createElement('td');
  var rowData2 = document.createElement('td');
  var rowData3 = document.createElement('td');
  var rowDataText1 = document.createTextNode(remark);
  var rowDataText2 = document.createTextNode(timestamp);
  var rowDataText3 = document.createTextNode("Some text");
  rowData1.appendChild(rowDataText1);
  rowData2.appendChild(rowDataText2);
  rowData3.appendChild(rowDataText3);
  row.appendChild(rowData1);
  row.appendChild(rowData2);
  row.appendChild(rowData3);
  table.appendChild(row);
});

leadID is an ID which I get from the current url, it contains the correct value so no issues there, path is also absolutely right.

Here is the table code:

<table class="table table-bordered" id="remarksTable">
    <tr>
        <th><strong>Created On</strong></th>
        <th><strong>Timestamp 2</strong></th>
        <th><strong>Remarks</strong></th>
    </tr>
    <tr>
        <td>12312313231</td>
        <td>12312312312</td>
        <td>just a remark.</td>
    </tr>
</table>

Now, when I run the page, it connects to the Firebase database and loads the required values, creates table row and table data, attaches text to it and then finally attaches the row to table with the id of remarksTable but it is not creating rows properly. Please note the table is creating using Bootstrap.

This is how it looks:

As you can see, the first row displays fine but the next 2 rows which were created by javascript looks a bit different.

To do things like that, it would be better to use a template engine like Mustache. It will be cleaner than creating manually html elements and nodes. BTW @Quentin's solution should solve your problem — Olivier Boissé
– Olivier Boissé, Commented Jul 27, 2016 at 9:06

Quentin · Accepted Answer · 2016-07-27 09:02:07Z

2

The most likely reason is that you are appending the new row to the table element and not the tbody element inside it, which is interacting poorly with the stylesheet that you didn't include in the question.

Note that all tables have a tbody element. The start and end tags for it are optional so it will be inserted by HTML parsing rules if you don't provide one (or more) explicitly).

answered Jul 27, 2016 at 9:02

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Luthando Ntsekwa · Accepted Answer · 2016-07-27 09:17:35Z

@Quentin is right, or you can simply add new rows this way:

var table = document.getElementById("remarksTable");
var row = table.insertRow();
var rowData1 = row.insertCell(0);
var rowData2 = row.insertCell(1);
var rowData2 = row.insertCell(2);
rowData1.innerHTML = remark;
rowData2.innerHTML = timestamp;
rowData3.innerHTML = "some text";

Here is a working demo

function addCells() {
  var table = document.getElementById("remarksTable");
  var row = table.insertRow();
  var rowData1 = row.insertCell(0);
  var rowData2 = row.insertCell(1);
  var rowData3 = row.insertCell(2);
  rowData1.innerHTML = "your remark";
  rowData2.innerHTML = "your timestamp timestamp";
  rowData3.innerHTML = "some text";
}

<table id="remarksTable" border=1>
  <tr>
    <td>first cell</td>
    <td>2nd cell</td>
    <td>3rd cell</td>
  </tr>
</table>
<button onclick="addCells()">Add New</button>

Collectives™ on Stack Overflow

Why Javascript is not creating tables properly?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related