Javascript inserting data into HTML table

Question

This is a rather simple question, I am having problems inserting data from Javascript into an HTML table.

Here is an excerpt of my JavaScript:

UPDATED - I got rid of the two loops and simplified it into one, however there is still a problem..

    for (index = 0; index < enteredStrings.length; index++) {
        output.innerHTML += "<td>" + enteredStrings[index] + "</td>"
        + "<td>" + enteredStringsTwo[index] + "</td>";
        nameCounter++;
        total.innerHTML = "Total: " + nameCounter;
    }

And here is an except of my HTML page:

<table id="nameTable">
   <tr>
     <th>First</th><th>Last</th>
   </tr>

Updated Picture:

alt text

Why do you have 2 loops? What's the difference between them? — David Tang
– David Tang, Commented Dec 16, 2010 at 5:47
Sent you an email at your Gmail address. I really appreciate your help. — TheStandardRGB
– TheStandardRGB, Commented Dec 16, 2010 at 6:24
Updated my answer with the code that works (after seeing the actual code that is sent through email) — Mahesh Velaga
– Mahesh Velaga, Commented Dec 16, 2010 at 7:08

Mahesh Velaga · Accepted Answer · 2010-12-16 07:07:13Z

6

Try this (edited):

var tableContent = '<tr>';
for (index = 0; index < enteredStrings.length; index++) {
    tableContent += "<td>" + enteredStrings[index] + "</td>";
    nameCounter++;  // I don't know if this should be there, 
                    // logically the counter should be incremented here as well?
    total.innerHTML = "Total: " + nameCounter;
}
tableContent += '</tr><tr>';

for (index = 0; index < enteredStringsTwo.length; index++) {
    tableContent += "<td>" + enteredStringsTwo[index] + "</td>";
    nameCounter++;
    total.innerHTML = "Total: " + nameCounter;
}
tableContent += '</tr>';
output.innerHTML += tableContent;

Edit2 (for updated question code):

var tableContent = '<tr>';
for (index = 0; index < enteredStrings.length; index++) {
    tableContent += "<td>" + enteredStrings[index] + "</td>"
    + "<td>" + enteredStringsTwo[index] + "</td>";
    nameCounter++;
    total.innerHTML = "Total: " + nameCounter;
}
tableContent += '</tr>';
output.innerHTML += tableContent;

Edit3 (after looking at the code sent in email):

var tableContent = "";

for (index = 0; index < enteredStrings.length; index++) {
    tableContent += "<tr><td>" + enteredStrings[index] + "</td>"

    + "<td>" + enteredStringsTwo[index] + "</td></tr>";

    nameCounter++;
    total.innerHTML = "Total: " + nameCounter;
}
output.innerHTML = tableContent;

edited Dec 16, 2010 at 7:07

answered Dec 16, 2010 at 5:26

Mahesh Velaga

22k5 gold badges41 silver badges60 bronze badges

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

4 Comments

The Scrum Meister Over a year ago

it wont help since the browser creates the <tr> automatically since you are updating the innerHTML every time.

Mahesh Velaga Over a year ago

@The Scrum Meister: sorry, I didn't get what you are saying. I don't see anything logically wrong with my code.

The Scrum Meister Over a year ago

since output is a element, upon each call to output.innerHTML the browser will fix the html to be proper. so the first call is adding a open <tr> only, however the broswer will close that tr for you. same applies for the next change which appends the td.

Mahesh Velaga Over a year ago

@The Scrum Meister: I didn't know that, edited my answer to take care of that then. Thanks.

The Scrum Meister · Accepted Answer · 2010-12-16 05:22:29Z

3

instead of closing the td you are opening new ones try

    for (index = 0; index < enteredStrings.length; index++) {
    output.innerHTML += "<td>" + enteredStrings[index] + "</td>";
    total.innerHTML = "Total: " + nameCounter;
}

for (index = 0; index < enteredStringsTwo.length; index++) {
    output.innerHTML += "<td>" + enteredStringsTwo[index] + "</td>";
    nameCounter++;
    total.innerHTML = "Total: " + nameCounter;
}

UPDATE: you are appending the html to the table instead of the row. in this case, the browser created a row for you automatically after the each td is appended.

edited Dec 16, 2010 at 5:22

answered Dec 16, 2010 at 5:09

The Scrum Meister

30.2k8 gold badges69 silver badges65 bronze badges

3 Comments

The Scrum Meister Over a year ago

what is the output pointing to? the table or the table row? what browser are you using?

TheStandardRGB Over a year ago

output = document.getElementById('nameTable'); and I'm using Firefox.

Chinmayee G Over a year ago

your output should point to <tr> tag of nameTable instead of table itself

Chinmayee G · Accepted Answer · 2010-12-16 05:27:57Z

0

With slight modifications in your code,

    var outputTbl = document.getElementById('nameTable');

    var output = document.createElement("tr");
    outputTbl.appendChild(output);

    for (index = 0; index < enteredStrings.length; index++) {
        output.innerHTML += "<td>" + enteredStrings[index] + "</td>";
        total.innerHTML = "Total: " + nameCounter;
    }

    for (index = 0; index < enteredStringsTwo.length; index++) {
       output.innerHTML += "<td>" + enteredStringsTwo[index] + "</td>";
       nameCounter++;
       total.innerHTML = "Total: " + nameCounter;
    }

answered Dec 16, 2010 at 5:27

Chinmayee G

8,1172 gold badges34 silver badges41 bronze badges

1 Comment

TheStandardRGB Over a year ago

That appears to work however when I attempt to enter a second name it recreates another table. As show in this image. i54.tinypic.com/244dszr.jpg

Berezh · Accepted Answer · 2012-09-30 21:32:04Z

-1

If you need to add inner html code here.

<table id="nameTable" style="width:300px;">
    <tr>
        <th>First</th><th>Last</th>
    </tr>
</table>

You can use Jnerator in this case.

If this is your data:

var data = [
    { first: 'Cole', last: 'Alan'},
    { first: 'Michael', last: 'Scott'}
]

You can add them to you table in next way:

for(var i=0; i<data.length; i++) {
    var item = data[i];
    var row = $j.tr({ child:[$j.td(item.first), $j.td(item.last)] });
    nameTable.appendChild(row.dom());
}
nameTotal.innerHTML = 'Total: ' + data.length;

This is example.

answered Sep 30, 2012 at 21:32

Berezh

9379 silver badges12 bronze badges

Collectives™ on Stack Overflow

Javascript inserting data into HTML table

4 Answers 4

4 Comments

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related