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.body.innerHTML = table

Here是有效的提琴。

Answer 2

您只是忘记了将结果应用于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 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元素

显示表格对象

4 个答案: