write a javascript function that displays html

Question

I am experiencing my very first run-in with javascript in a college course, and the textbook is not helping me even a little bit. It seems pretty simple, but I just can't get it to work. So here is the problem:

I have to write a function called showTable() to write the following code to the document to create the header row of a table:

<table id='contributors'>
<thead>
<tr>
<th>Date</th><th>Amount</th>
<th>First Name</th><th>Last Name</th>
<th>Address</th>
</tr>
</thead>

I then have to write the 'tbody' tag to the document followed by a for loop to create a row for each person listed in the lastName array. Each time it loops through the array it should add the following code:

<tr>
<td>date</td>
<td class='amt'>amount</td>
<td>firstName</td>
<td>lastName</td>
<td>street <br />
city, state zip
</td>
</tr>

where date, amount, firstName, lastName, street, city, state, and zip are the items from the date, amount, firstName, lastName, street, city, and zip arrays, respectively, corresponding to the value from the counter variable in the for loop.After the for loop, write the '/tbody' tag to close off the table body followed by the closing table tag.

So I wrote what I thought was some code to start off the header row that looks like this:

document.write("<table id='contributors'>")
document.write("<thead>")
document.write("<tr>")
document.write("<th>Date</th><th>Amount</th>")
document.write("<th>First Name</th><th>Last Name</th>")
document.write("<th>Address</th>")
document.write("</tr>")
document.write("</thead>")

If I put this code in the html between script tags it writes the header row to the document, BUT if I put this code in a function in the js file it does nothing. I am really lost and need a kickstart here. If I remember correctly a "function" is supposed to return a value, so I know I must really be missing something here when trying to write this function.

Any help at all would be greatly appreciated! thank you.

John

[`document.write`](https://developer.mozilla.org/en-US/docs/Web/API/document.write) opens a new document when called after the page has been parsed. — Teemu, Jun 09 '15 at 15:34

score 1 · Accepted Answer · edited May 23 '17 at 12:14

Avoid using document.write for this (and probably for anything else).

The right approach here is to add child elements to their containers. So, for the first part, assuming that the table is the direct child of the body, you can do something like document.body.appendChild(generatedTableElementHere);.

Then, for the next part, the container element would be the table, and in the for loop, you do stuff like document.getElementById('contributors').appendChild(generatedRowElementHere);.

If you still decide to use document.write, the approach would be to generate the full HTML, and then write in all at once, because it's not possible to use it to create a table, and then use it again to fill in that table.

Here's a simple example just to get you started:

var table = document.createElement('table');
table.id = 'contributors';
table.innerHTML = "<thead>" +
  "<tr>" +
  "<th>Date</th><th>Amount</th>" +
  "<th>First Name</th><th>Last Name</th>" +
  "<th>Address</th>" +
  "</tr>" +
  "</thead>";

var stuff = ['a', 'b', 'c', 'd', 'e', 'f'];

document.body.appendChild(table);

for (var i = 0; i < stuff.length; i++) {
  var template = document.createElement('tbody');
  template.innerHTML = "<tr>" +
    "<td>date " + stuff[i] + "</td>" +
    "<td class='amt'>amount " + stuff[i] + "</td>" +
    "<td>firstName " + stuff[i] + "</td>" +
    "<td>lastName " + stuff[i] + "</td>" +
    "<td>street, city, state zip " + stuff[i] + "" +
    "</td>" +
    "</tr>";
  table.appendChild(template);
}

#contributors {
  border: 1px solid green
}

score 0 · Answer 2 · answered Jun 09 '15 at 15:35

If you put this code inside of a function then the function will need to be called in order for it to execute. Alternatively you could put it inside of an immediate function that will execute itself like so:

(function(){
    document.write("<table id='contributors'>")
    document.write("<thead>")
    document.write("<tr>")
    document.write("<th>Date</th><th>Amount</th>")
    document.write("<th>First Name</th><th>Last Name</th>")
    document.write("<th>Address</th>")
    document.write("</tr>")
    document.write("</thead>")
}());

score 0 · Answer 3 · answered Jun 09 '15 at 15:36

If you place it inside a function then you need to call that function also, for example when the document is ready or loaded, or when you click a button ...for example function foo() then

document.onload = function()
{

foo();
//Javascript code goes here
}

jorge polanco · Answer 4 · 2015-06-09T19:00:36.450

-1

You could use the appendChild() method

function showTable(index)
{
  var table="<table class='contributors' id='table_index'>"
     +"<thead>"
        +"<tr>"
           +"<th>Date</th><th>Amount</th>"
           +"<th>First Name</th><th>Last Name</th>"
           +"<th>Address</th>"
        +"</tr>"
     +"</thead>"
     +"<tbody>"
         //adding the cicle for each row using table+='values'
     table+="</tbody>"
          +"</table>";
     document.getElementById('tableContainer').appendChild(table);
}

remember that attribute Id should be unique so for the example maybe you need to add the table to a container something like

<div id='tableContainer'></div>

Regards.

resources

edited Jun 09 '15 at 19:00

answered Jun 09 '15 at 15:46

jorge polanco

96
4

Looks like you've mixed jQuery and Vanilla JS here. This won't work. – Teemu Jun 09 '15 at 18:27
@Teemu I mixed Jquery with Js, now I did the change to use pure JS, the method should I use at the beginning **appendChild** I didn't undertand why are you saying that mix jQuery with Vanilla JS? – jorge polanco Jun 09 '15 at 19:02
Umh... `appendChild` takes an element as an argument, not a string ... You're still mixing jQuery and Vanilla JS. – Teemu Jun 10 '15 at 04:23

write a javascript function that displays html

4 Answers4