CODEWITHSUNDEEP
javascripthtmlcss
lovelaceada
lovelaceada

Reputation: 187

How can I populate a table with JavaScript?

How can I populate a table with JavaScript in the proper way?

function loadTableData() {

  //0: Date
  //1: Name

  var row = document.getElementById("test");

  var x = row.insertCell(0);
  x.innerHTML = "10/17/2018";

  var x = row.insertCell(1);
  x.innerHTML = "john doe";

}
<table id="myTable" class="table table-borderless table-striped table-earning">
  <thead>
    <tr>
      <th>date</th>
      <th>file name</th>
    </tr>
  </thead>
  <tbody>
    <tr id="test"></tr>
  </tbody>
</table>
<script>loadTableData();</script>

My current code populates the first two cells but I would like to move to the next column and populate another two cells. Im not sure how to do this the correct way.

Current output enter image description here

Upvotes: 16

Views: 40797

Answers (4)

Wisdom Jere
Wisdom Jere

Reputation: 86

    const courses = [{
    "Name": "Communications",
    "Date": "22 April 2022",
    "Code": "CS368"                
    },
    {
    "Name": "Programming",
    "Date": "22 April 2021",
    "Code": "CS368"                
    },
    {
    "Name": "Networks",
    "Date": "22 April 2002",
    "Code": "CS368"                
    }]
const table = document.getElementById("tableBody");
courses.map(course=>{
   let row = table.insertRow();
   let name = row.insertCell(0);
   name.innerHTML = course.Name;
   let date = row.insertCell(1);
   date.innerHTML = course.Date;
   let code = row.insertCell(2);
   code.innerHTML = course.Code;
});         
   
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-bordered table-sm">
         <thead>
            <tr>
                <th>Name</th>
                <th>Date</th>
                <th>Code</th>                                              
            </tr>
         </thead>
         <tbody id="tableBody">
           
         </tbody>
   </table>

Upvotes: 1

borrascador
borrascador

Reputation: 605

The trick is to loop over your data and use insertRow to create a row before you insert the data. You can see that the tbody element is empty in this example and each tr element is created dynamically.

<table id="myTable" class="table table-borderless table-striped table-earning">
  <thead>
    <tr>
      <th>date</th>
      <th>file name</th>
    </tr>
  </thead>
  <tbody id="testBody"></tbody>
</table>
<script>
  const items1 = [
    { date: "10/17/2018", name: "john doe" },
    { date: "10/18/2018", name: "jane doe" },
  ];
  const items2 = [
    { date: "10/17/2019", name: "john doe" },
    { date: "10/18/2019", name: "jane doe" },
  ];
  function loadTableData(items) {
    const table = document.getElementById("testBody");
    items.forEach( item => {
      let row = table.insertRow();
      let date = row.insertCell(0);
      date.innerHTML = item.date;
      let name = row.insertCell(1);
      name.innerHTML = item.name;
    });
  }
  loadTableData(items1);
  loadTableData(items2);
  loadTableData([]);
</script>

Upvotes: 19

Sean Aitken
Sean Aitken

Reputation: 1207

As the other responder mentioned, you need to work with the document using the DOM. Treat everything as the elements they are in HTML.

var table = document.getElementById("myTable");

var rowNode = document.createElement("tr");
var cellNode = document.createElement("td");
var textNode = document.createTextNode("John Doe");

cellNode.appendChild(textNode);
rowNode.appendChild(cellNode);
table.appendChild(rowNode);

For further interactions with a table DOM element, the W3C spec (DOM Interface) is a good reference.

Upvotes: 3

S Graham
S Graham

Reputation: 232

I'm not an HTML expert, but:

I think you have to use element.appendChild() to append the child you have created. You shouldn't use the innerHTML, rather use the methods built into the Document Object Model.

Upvotes: 0

Related Questions