Displaying a table object

Question

I am filling an html table with Javascript arrays. But I am unable to display this table on the page. What can I do to display this table? Also, let me know if anything is wrong with my function.

Here is my code

function resultTable(arr1, arr2, arr3) {

    var result = "<table id='Result' border=1>";


    result += "<tr>";
    result += "<th>"+Name+"</th>";
    result += "<th>"+Score+"</th>";
    result += "<th>"+Grade+"</th>";
        result += "</tr>";

    for(var i=0; i<10; i++) {
        result += "<tr>";
        result += "<td>"+arr1[i]+"</td>";
        result += "<td>"+arr2[i]+"</td>";
        result += "<td>"+arr3[i]+"</td>";
        result += "</tr>";
    }
    result += "</table>";

    return result;
}

var table = resultTable(names, score, grade);

set a div and sets the div inner html to return value of the fn — shakeel osmani, Sep 07 '18 at 22:12
I think your question might be duplicated of this question : https://stackoverflow.com/questions/14643617/create-table-using-javascript they provided a wide range of answers — El., Sep 08 '18 at 00:57

score 2 · Answer 1 · answered Sep 07 '18 at 22:19

2

Everything's good here. All you need to now do is append it to DOM. eg:

document.body.innerHTML = table

Here's a working fiddle of that.

answered Sep 07 '18 at 22:19

rmn

1,119
7
18

Thanks. It worked. Now I added headers of the table, but it stopped working. I updated the code. Please have a look. – Robin Goodfellow Sep 07 '18 at 22:34
1

You seem to have a string concatenation error in your updated code, `""+Name+""` should be simply `"Name"`, no string concatenation is required here. Do the same for *Score* and *Grade*. – rmn Sep 07 '18 at 22:38

P.S. · Accepted Answer · 2018-09-07T22:31:05.817

You just forgot to apply the result to the DOM, for example, you can create specific container for that:

document.getElementById('container').innerHTML = table;

or just insert it into the body:

document.body.innerHTML = table;

Here is an example:

function resultTable(arr1, arr2, arr3) {
    var result = "<table id='Result' border=1>";
    for(var i = 0; i < arr1.length; i++) {
        result += "<tr>";
        result += "<td>"+arr1[i]+"</td>";
        result += "<td>"+arr2[i]+"</td>";
        result += "<td>"+arr3[i]+"</td>";
        result += "</tr>";
    }
    result += "</table>";
    return result;
}

var names = ['name 1', 'name 2', 'name 3'];
var score = ['score 1', 'score 2', 'score 3'];
var grade = ['grade 1', 'grade 2', 'grade 3'];

var table = resultTable(names, score, grade);
document.getElementById('container').innerHTML = table;

<div id="container"></div>

score 1 · Answer 3 · answered Sep 07 '18 at 22:29

The DOM result element doesnt exist actually... It must be in the HTML or create via JavaScript.

Here in your example, it is only a string.

function resultTable(arr1, arr2, arr3) {
    
    // This is a string
    var result = "<table id='Result' border=1>";
    
    for(var i=0; i<1; i++) {
        result += "<tr>";
        result += "<td>"+arr1[i]+"</td>";
        result += "<td>"+arr2[i]+"</td>";
        result += "<td>"+arr3[i]+"</td>";
        result += "</tr>";
    }
    
    result += "</table>";
    
    console.log( typeof result ); // string
    
    // Still a string
    return result;
}

// Still a string
var table = resultTable( [ 'Name' ], [ 'Score' ], [ 'Grade' ] );

console.log( typeof table ); // string

// You can add it via innerHTML like this :
document.body.innerHTML = table;

score 0 · Answer 4 · answered Sep 07 '18 at 22:40

0

Everything is alright you have to append a DOM element to it

answered Sep 07 '18 at 22:40

Haroon Ahmed

23
4

Displaying a table object

4 Answers4