Display JavaScript table on the load of a html web page

Question

I am trying to display a populated table on a html page using javascript.

This is what I have so far:

table.js - contains my function and data for the table

var ORDER = { orders: [] };

function Order(ref, grower, item) {
    this.order_reference = ("o" + ref);
    this.grower_reference = grower;
    this.item_ordered = item;
}

var order1 = new Order(1, "grower2", "item");
ORDER.orders.push(order1);

function addTable(){        
    var table = document.createElement("TABLE");
    table.setAttribute("id", "myTable");
    document.body.appendChild(table);

    for (var i=0; i<ORDER.length; i++) {    
        var row = document.createElement("TR");

        var refCell = document.createElement("TD");
        var growerCell = document.createElement("TD");
        var itemCell = document.createElement("TD");

        var ref = document.createTextNode(refArray[i]);
        var grower = document.createTextNode(growerArray[i]);
        var item = document.createTextNode(itemArray[i]);

        refCell.appendChild(ref);
        growerCell.appendChild(grower);
        itemCell.appendChild(item);

        table.appendChild(row);            
    }
}

html page

<!DOCTYPE html>
    <html lang = "en">
         <head>
             <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
             <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
         </head>

         <body id="contracts">
             <div id="wrapper">
                 <div id="mytable">
                 </div>
             </div>
             <div id="footer">
                 <table id= "footer" style="width: 100%">
                     <tr>
                         <td valign="bottom">Company Name <br> Tel Num <br> Location, Postcode</td> 
                         <td> <button onclick="addTable()"> Click me </button></td> 
                         <td align="right" valign="bottom"><a href="#"><a href="#">Home</a> &nbsp; <a href="#"><a href="#">About</a> &nbsp; <a href="#"><a href="#">Help</a> &nbsp; <a href="#"><a href="#">Contact</a></td> 
                     </tr>    
                 </table>
             </div>
         </div> 

         <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
         <script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>        
         <script type="text/javascript" src="table.js"></script>
    </body>   
</html>

Firstly, I wanted to display the table on the click of a button. Secondly, I want to display the table as soon as the html page is loaded.

How would I go about this?

Sorry if its not a good question, or if there is lots missing. I'm quite new to this so sort of just using different tutorials and putting stuff together ...

Do you want to display table at the click event(button click in your case) or onload event? — Wasim Wani
– Wasim Wani, Commented Feb 27, 2015 at 12:50
ultimately on the load of the page, but I was just having a practice with the on click of a button to see if it would work (which it didn't) — hturner
– hturner, Commented Feb 27, 2015 at 12:52
A couple of observations. (1) you dont append any of the td elements to the tr in the loop. (2) Since the whole page's layout is recalculated anytime something is added to the on-screen dom, it would be quicker if you moved the code that appends the table to the document from the 3rd line of the function, to the last. — enhzflep
– enhzflep, Commented Feb 27, 2015 at 13:04

Ruan Mendes · Accepted Answer · 2015-02-27 13:22:40Z

4

You have a few problems:

In your loop for (var i = 0; i < ORDER.length; i++) { should be for (var i = 0; i < ORDER.orders.length; i++) {
refArray, growerArray, itemArray are undefined
You are not appending the tds to the tr

Be sure to look at https://developer.chrome.com/devtools/docs/javascript-debugging and to check your console for errors.

The following example adds the table after the page is loaded, and also when you click the button.

var ORDER = {
  orders: []
};

function Order(ref, grower, item) {
  this.order_reference = ("o" + ref);
  this.grower_reference = grower;
  this.item_ordered = item;
}

var order1 = new Order(1, "grower2", "item");
ORDER.orders.push(order1);

function addTable(orders) {
  var table = document.createElement("TABLE");
  table.setAttribute("id", "myTable");
  document.body.appendChild(table);

  for (var i = 0; i < orders.length; i++) {
    var order = orders[i];
    var row = document.createElement("TR");

    var refCell = document.createElement("TD");
    var growerCell = document.createElement("TD");
    var itemCell = document.createElement("TD");

    row.appendChild(refCell);
    row.appendChild(growerCell);
    row.appendChild(itemCell);

    var ref = document.createTextNode(order.order_reference);
    var grower = document.createTextNode(order.grower_reference);
    var item = document.createTextNode(order.item_ordered);

    refCell.appendChild(ref);
    growerCell.appendChild(grower);
    itemCell.appendChild(item);

    table.appendChild(row);
    document.body.appendChild(document.createElement('hr'));
  }
}

window.addEventListener('load', function() {
  addTable(ORDER.orders)
});

<div id="wrapper">
  <div id="mytable"></div>
  <div id="footer">
    <table id="footer" style="width: 100%">
      <tr>
        <td valign="bottom">Company Name
          <br />Tel Num
          <br />Location, Postcode</td>
        <td>
          <button onclick="addTable(ORDER.orders)">Click me</button>
        </td>
        <td align="right" valign="bottom">
          <a href="#">Home</a> &nbsp;<a href="#">About</a> &nbsp;<a href="#">Help</a> &nbsp;<a href="#">Contact</a>
        </td>
      </tr>
    </table>
  </div>
</div>

<hr />

edited Feb 27, 2015 at 13:22

answered Feb 27, 2015 at 13:02

Ruan Mendes

92.7k31 gold badges161 silver badges225 bronze badges

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

4 Comments

hturner Over a year ago

Thanks for such a detailed answer. This makes the addTable function much more clear and I think I understand better what it is doing! and I'm not sure why it's not working because it is below... but nothing is displaying on my page other than my header and footer

Ruan Mendes Over a year ago

Did you debug as I suggested in the answer? Error messages? Why don't you just copy paste my answer?

hturner Over a year ago

I have used developer tools and it says contracts.html:97 GET localhost:3000/views/table.js 2contracts.html:81 Uncaught ReferenceError: addTable is not definedcontracts.html:81 onclick

Ruan Mendes Over a year ago

@hturner That means you are not defining addTable in the right place. At StackOverflow, questions should be about one specific problem, that is how they stay useful to others. You should accept an answer here and then create a separate question that is specific to your new problem

Dan Prince · Accepted Answer · 2015-02-27 12:51:44Z

1

The first thing you need to consider, is that you can't add elements to the DOM until it has loaded.

Your addTable function builds the table and appends it to the <body> element. This needs to be called when the page is ready and the DOM has been loaded.

window.addEventListener('load', addTable);

However, I reckon that you probably don't want it to be attached to the bottom of the <body>? I'm guessing it should go inside <div id="mytable"></div>?

The following adjustments would allow for that behaviour.

var table = document.createElement("TABLE"),
    container = document.getElementById('mytable');

table.setAttribute("id", "myTable");
container.appendChild(table);

answered Feb 27, 2015 at 12:51

Dan Prince

30.1k15 gold badges93 silver badges124 bronze badges

Collectives™ on Stack Overflow

Display JavaScript table on the load of a html web page

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related