Yosra MH
Yosra MH

Reputation: 159

Posting JavaScript array in html table

I'm used to do this via php but now moving to js (newbie) and I can't see why it doesn't work! Also please any suggestion other than document.write? Because I don't want to delete the html that I would make later. All I wanted is to post js array values into html table. when I write: document.getElementById("demo").innerHTML += '<table><tr><td>'+item +'</td></tr></table>'; it works but creates table everytime which is wrong

<html>
<head>
<style>
table, td {
  border: 1px solid black;
}
</style>
</head>
<body>

<span id="demo"></span>

    
<script>
document.write("<table>");
arrayjs.forEach(myFunction);
document.write("</table>");

function myFunction(item) {
 document.getElementById("demo").innerHTML += '<tr><td>'+item +'</td></tr>';
}

</script>

</body>
</html>

Upvotes: 3

Views: 613

Answers (3)

Yosra MH
Yosra MH

Reputation: 159

This also works :)

AS Rory and wwilkowski said, creating elements is the best practise but I tried this and it's working too (so I'm posting to anyone who wants simpler solution, eventhough I didn't understand why we should use an empty string):

    
    <html>
    <head>
    <style>
    table {
      border-collapse: collapse;
    }
      td, th {
      border: 1px solid #999;
      padding: 0.5rem;
      text-align: left;
    }
    </style>
    </head>
    <body>
    
    <div id = "test"> </div>
        
    <script>
    var outputHTML = "";
    var animal =["cat","dog","bird","goat"];
    
    // loop over array and create html string
    outputHTML = "<table>";
    for(var i= 0;i<animal.length;i++){
    outputHTML+= "<tr>";
    outputHTML+= '<td>' + animal[i] + '</td>';
    document.getElementById("test").innerHTML = outputHTML;
    outputHTML+= "</tr>";
    }
    outputHTML+= "</table>";
    </script>
    </body>
    </html> 

Upvotes: 0

wwilkowski
wwilkowski

Reputation: 361

Create element using document.createElement instead of document.write.

tab = document.createElement("table")

Then, use this same function to create table elements and add content using textContent. Finally, add new element as child using appendChild

arrayjs.forEach(item => {
  row = document.createElement('tr')
  tableItem = document.createElement('td')
  tableItem.textContent = item;
  row.appendChild(tableItem)
  tab.appendChild(row);
})

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337560

Your idea that you should avoid document.write is correct as it's generally considered bad practice and should be avoided where possible. A better approach is to use native methods to create elements and add them to the DOM, such as createElement() and appendChild().

You can use this approach to create a table and a tbody within it. From there the tbody has methods which let you create rows, and from there cells within the rows.

Below is an example of how to do this.

let arrayjs = ['foo', 'bar', 'fizz', 'buzz'];
let container = document.querySelector('#demo');
tableFromArray(arrayjs, container);

function tableFromArray(arr, container) {
  let table = document.createElement('table');
  let tbody = document.createElement('tbody');
  
  container.appendChild(table);
  table.appendChild(tbody)
  
  arr.forEach(item => {
    let tr = tbody.insertRow(tbody.rows.length); // add a new row
    let td = tr.insertCell(tr.cells.length); // add a new cell within the row
    td.textContent = item;    
  });
}
table,
td {
  border: 1px solid black;
}
<span id="demo"></span>

Upvotes: 2

Related Questions