inserting data in table via javascript

Question

I have a table in my index.html file

<table id="userTable">
      <tr>
        <th>UserId</th>
        <th>About you</th>
        <th>Age Max</th>
        <th>Age Min</th>
        <th>City</th>
      </tr>
</table>

Im using firebase to pull some data down to display it in the table.

  snapshot.forEach(snap => {
    console.log(snap.val())
    var r = document.getElementById('userTable').insertRow().innerHTML = snap.val().username
    var x = r.insertCell(1);
    x.innerHTML = snap.val().age
  })

The firebase logic is working correct, i am able to get the desired fields, but i can't seem to insert the data into a column for that row.

Im getting an error:

TypeError: r.insertCell is not a function. (In 'r.insertCell(1)', 'r.insertCell' is undefined)

The plan is to create a row and then populate the columns with the rest of the data.

What do you expect r to hold and why?

PM 77-1
– PM 77-1

2019-11-04 21:17:38 +00:00
Commented Nov 4, 2019 at 21:17 — PM 77-1
– PM 77-1, Commented Nov 4, 2019 at 21:17

Our_Benefactors · Accepted Answer · 2019-11-04 21:19:31Z

2

You have two assignments in this line:

var r = document.getElementById('userTable').insertRow().innerHTML = snap.val().username

I'm not sure what the value of r is in this case, but it's not a HTMLTableRowElement which is why you're getting that TypeError. You need to call insertCell on a HTMLTableRowElement object. See this documentation for more information: https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableRowElement/insertCell

answered Nov 4, 2019 at 21:19

Our_Benefactors

3,6273 gold badges25 silver badges30 bronze badges

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

Collectives™ on Stack Overflow

inserting data in table via javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related