lapots
lapots

Reputation: 13415

create table with values using js

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?

Upvotes: 0

Views: 215

Answers (3)

Thomas Jones
Thomas Jones

Reputation: 4962

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>).

Upvotes: 3

Mallikarjuna Reddy
Mallikarjuna Reddy

Reputation: 1212

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

</script>
</head> 

Upvotes: 0

aepheus
aepheus

Reputation: 8197

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.

Upvotes: 1

Related Questions