0

我有一个使用 Javascript 填充表格的代码：

var myResponse = document.getElementById("jsonPlaceHolder");
myResponse.innerHTML += "<table border=1> <tr> <td> User Id </td> <td> Question </td> <td> Link Question </td>  </tr>";
for (var i = 0; i < 25; i++) {
    myResponse.innerHTML += "<tr>"
    myResponse.innerHTML += "<td>" + jsonObj[i]["user_id"] + "</td>";
    myResponse.innerHTML += "<td>" + jsonObj[i]["text"] + "</td>";
    myResponse.innerHTML += "</tr>"
}
myResponse.innerHTML += "</table>";

这段代码的问题是当我运行这个表时没有在 for 循环中继续。如果我添加

        myResponse.innerHTML += "<table><tr>"

在我的 for 循环中，创建了表。这不是有点奇怪吗，

因为我正在使用+=添加到 DOM 元素的当前innerHTML。

4

2 回答 2

4

关于innerHTML 最容易被误解的事情之一源于API 的设计方式。它重载了 + 和 = 运算符来执行 DOM 插入。这使程序员误以为它只是在执行字符串操作，而实际上 innerHTML 的行为更像是一个函数而不是一个变量。如果innerHTML 是这样设计的，人们就不会那么困惑了：

element.innerHTML('这里有一些html '); 不幸的是，更改 API 为时已晚，因此我们必须了解它实际上是一个 API，而不仅仅是一个属性/变量。

当您修改 innerHTML 时，它会触发对浏览器 HTML 编译器的调用。它与编译您的 html 文件/文档的编译器相同。innerHTML 调用的 HTML 编译器没有什么特别之处。因此，无论您可以对 html 文件做什么，都可以将其传递给 innerHTML（一个例外是嵌入式 javascript 不会被执行——可能是出于安全原因）。

从浏览器开发人员的角度来看，这是有道理的。为什么在浏览器中包含两个单独的 HTML 编译器？特别是考虑到 HTML 编译器是庞大而复杂的野兽这一事实。

不利的一面是，处理不完整的 HTML 的方式与处理 html 文档的方式相同。对于不在表格内的元素，大多数浏览器都会简单地将其剥离（正如您自己观察到的那样）。这本质上就是您想要做的 - 创建无效/不完整的 HTML。

解决方案是提供innerHTML完整的 HTML：

    var htmlString = "<table border=1> <tr> <td> User Id </td> <td> Question </td> <td> Link Question </td>  </tr>";
    for (var i = 0; i < 25; i++) {
        htmlString  += "<tr>"
        htmlString  += "<td>" + jsonObj[i]["user_id"] + "</td>";
        htmlString  += "<td>" + jsonObj[i]["text"] + "</td>";
        htmlString  += "</tr>"
    }
    htmlString += "</table>"
    myResponse.innerHTML += htmlString;
于 2013-04-10T05:20:02.763 回答
1

使用 DOM API 来操作 DOM：

var myResponse = document.getElementById("jsonPlaceHolder");
var table = document.createElement('table'),
    headings = ["User ID", "Question", "Link Question"];
table.style.border = "1";

var r = table.insertRow(-1);

for (var i = 0; i < 3; i++) {
    (function(){
        return r.insertCell(-1);
    })().innerHTML = heading[i];
}

for (var i = 0; i < 25; i++) {
    r = table.insertRow(-1);

    var userid = r.insertCell(-1),
        text = r.insertCell(-1);

    userid.innerHTML = jsonObj[i]["user_id"];
    text.innerHTML = jsonObj[i]["text"];
}

myResponse.appendChild(table);
于 2013-04-10T05:25:52.820 回答