Posting JavaScript array in html table

Question

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>

You aren't putting the table rows inside of the table. You shouldn't use document.write for this, see this answer: stackoverflow.com/questions/13741584/… — Will Taylor
– Will Taylor, Commented Jan 12, 2021 at 9:58
@WillTaylor table rows are created depending on foreach loop, I think the table isn't seen outside the loop but I don't know why — Yosra MH
– Yosra MH, Commented Jan 12, 2021 at 10:15

Rory McCrossan · Accepted Answer · 2021-01-12 09:56:15Z

2

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>

answered Jan 12, 2021 at 9:56

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

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

3 Comments

Yosra MH Over a year ago

Thank you, this works but I'm trying to avoid using "cells" also because they look ugly with the double borders lines especially that I have images to insert in some td elements :(

Rory McCrossan Over a year ago

If you're building a table you don't have a choice, you have to use td cells. That being said, they can easily be styled, or even removed completely, using CSS

Yosra MH Over a year ago

oh yes that's true! I have posted a new answer with another solution that works but I still your solution is the best way to do it :)

wwilkowski · Accepted Answer · 2021-01-12 09:59:13Z

1

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);
})

answered Jan 12, 2021 at 9:59

wwilkowski

3615 silver badges15 bronze badges

1 Comment

Yosra MH Over a year ago

Thank you for your answer, yes I think it's better to create elements (it's just that this didn't work for me but you are in the correct way)

Yosra MH · Accepted Answer · 2021-01-12 13:13:17Z

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>

Collectives™ on Stack Overflow

Posting JavaScript array in html table

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related