create table with values using js

Question

I want to create table using javascript and fill it with data. So I decided to use prompt method and loop while.

But when I try to load page I always get two error message in google chrome developer tools enter image description here

Here is the code

<html>
<head>
    <meta charset="utf-8">
    <script type="text/javascript">
    function onStart() {
        var list = new Array();
        var headers = new Array("Имя","Отчество","Фамилия","Дата рождения");
        var i = -1;
        while(true) {
            var a = prompt("Имя","noname");
            var b = prompt("Отчество","nomiddlename");
            var c = prompt("Фамилия","nosurname");
            var d = prompt("Дата рождения!",0);
            if (confirm("Уверены что хотите добавить студента?")) {
                i++;
                list[i] = a + "-" + b + "-" + c + "-" + d;
            }else{ break; };
        }
        tab = "<table>";
        for(j = 0; j<headers.length;j++) {
            tab += "<th>" + headers[j] + "</th>";
        for(var j = 0; j < list.length; j++) {
            var params = list[i].split('-');
            tab += "<tr>";
            for(k = 0; k < params.length;k++) {
                tab +="<td>" + params[k] + "</td>";
            }
            tab +="</tr>";
        }
        tab +="</table>";
        document.write(tab);
    };
    </script>
</head>
<body onLoad = "onStart()">
</body>

What's the problem?

Thomas Jones · Accepted Answer · 2013-02-05 18:41:46Z

3

Your for loops seem to be mis-indented and not closed properly

for(j = 0; j<headers.length;j++) {
        tab += "<th>" + headers[j] + "</th>";
    for(var j = 0; j < list.length; j++) {
        var params = list[i].split('-');
        tab += "<tr>";
        for(k = 0; k < params.length;k++) {
            tab +="<td>" + params[k] + "</td>";
        }
        tab +="</tr>";
    }

Should be

for(j = 0; j<headers.length;j++) {
    tab += "<th>" + headers[j] + "</th>";
}
for(var j = 0; j < list.length; j++) {
    var params = list[i].split('-');
    tab += "<tr>";
    for(k = 0; k < params.length;k++) {
        tab +="<td>" + params[k] + "</td>";
    }
    tab +="</tr>";
}

Not directly related to your question, but you have a few other common javascript errors.
By not declaring variables with var, you are unintentionally creating global variables. While this probably isn't a huge issue on your page, but it is bad practice.

In addition, you should wrap your <th> tags you are appending inside of a <tr>, as the only "valid" element within a <table> is a <tr> (technically its tbody, thead, and tfoot, of which the only valid children is <tr>).

edited Feb 5, 2013 at 18:41

answered Feb 5, 2013 at 17:13

Thomas Jones

4,94730 silver badges35 bronze badges

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

2 Comments

aepheus Over a year ago

My guess is that this is supposed to be two independent loops, not nested loops.

Thomas Jones Over a year ago

@aepheus you are probably right, I'll update the answer to reflect that, and the fact that adding <th> to a <table> element is also incorrect

aepheus · Accepted Answer · 2013-02-05 17:17:48Z

1

You're missing the closing } on your first loop:

for(j = 0; j<headers.length;j++) {

  tab += "<th>" + headers[j] + "</th>";

}

I would go to guess he is trying to loop thru headers, followed by columns, then close the table. Not loop thru headers, and for each header add all rows. And, certainly not loop thru headers and for each header loop through all rows and close and write the table.

answered Feb 5, 2013 at 17:17

aepheus

8,2178 gold badges39 silver badges52 bronze badges

Comments

Mallikarjuna Reddy · Accepted Answer · 2013-02-05 17:18:16Z

0

In your code onStart(){} method is not closed properly. Add one more "}" in front of the below code

</script>
</head>

answered Feb 5, 2013 at 17:18

Mallikarjuna Reddy

1,2122 gold badges20 silver badges33 bronze badges

3 Comments

aepheus Over a year ago

I don't think it is the function he didn't close, as that would make some strange behavior in those loops.

Mallikarjuna Reddy Over a year ago

@aepheus It is just quick solution to him.

aepheus Over a year ago

Quick solution or not, I'm sure he is hoping for the correct output.

Collectives™ on Stack Overflow

create table with values using js

3 Answers 3

2 Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related