显示表对象

Question

我正在用Javascript数组填充一个html表。但我无法在页面上显示此表格。我该怎么做才能显示这张桌子？另外，如果我的功能有任何问题，请告诉我。

这是我的代码

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

Answer 1

您只是忘记将结果应用于DOM，例如，您可以为此创建特定容器：

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

或者只是将其插入body：

document.body.innerHTML = table;

这是一个例子：

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>

Answer 2

这里的一切都很好。您现在需要做的就是将它附加到DOM。例如：

document.body.innerHTML = table

Here是一个工作小提琴。

Answer 3

DOM结果元素实际上并不存在......它必须在HTML中或通过JavaScript创建。

在您的示例中，它只是一个字符串。

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;

Answer 4

一切都好，你必须附加一个DOM元素