显示表格对象答案

【问题标题】：Displaying a table object显示表格对象
【发布时间】：2019-02-13 06:10:44
【问题描述】：

我正在用 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);

【问题讨论】：

设置一个div并设置div内部html为fn的返回值
@shakeelosmani 知道了，谢谢！
我认为您的问题可能与此问题重复：stackoverflow.com/questions/14643617/… 他们提供了广泛的答案

标签： javascript html arrays

【解决方案1】：

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

【讨论】：

【解决方案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;

&lt;div id="container"&gt;&lt;/div&gt;

【讨论】：

【解决方案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;

【讨论】：

【解决方案4】：

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

document.body.innerHTML = table

Here 是一个可行的方法。

【讨论】：

谢谢。有效。现在我添加了表格的标题，但它停止了工作。我更新了代码。请看一看。
您的更新代码中似乎有字符串连接错误，"<th>"+Name+"</th>" 应该只是"<th>Name</th>"，这里不需要字符串连接。对 Score 和 Grade 执行相同操作。