Question

为什么以下代码不起作用？

<html>
<head>
    <script type="text/javascript">
    function addTable() {
        var table = document.createElement('table');
        table.innerHTML = "<tr><td>123</td><td>456</td></tr>";
        document.getElementById("addtable").appendChild(table);
    }
    </script>
</head>
<body>
    <input type="submit" value="New Table" onClick="addTable()"/>
    <div id="addtable"></div>
</body>
</html>

Answer 1

据我所知，设置table元素或表格部分元素（如tbody或thead）的innerHTML属性在Internet Explorer上不起作用（编辑：我刚检查 - 使用ietester和纯IE8。结果是IE6和IE8的“未知运行时错误”，它崩溃了IE7，但这可能是IEtester特定的问题）。

向表中添加行的DOM standard方法是在表或表节元素上使用insertRow()方法（在该DOM规范中查找HTMLTableElement和HTMLTableSectionElement）：

<script type="text/javascript">
function addTable() {
    var c, r, t;
    t = document.createElement('table');
    r = t.insertRow(0); 
    c = r.insertCell(0);
    c.innerHTML = 123;
    c = r.insertCell(1);
    c.innerHTML = 456;
    document.getElementById("addtable").appendChild(t);
}
</script>

在脚本中，没有创建显式表部分。 AFAIK，自动创建TBODY，并在其中插入行。

编辑：关于IE，我应该指出你可以通过设置innerHTML属性添加一个包含内容的表，但是你注入的html必须是一个完整的表。所以这确实有效，即使在IE上也是如此：

<script type="text/javascript">
function addTable() {
    var html = "<table><tr><td>123</td><td>456</td></tr></table>";
    document.getElementById("addtable").innerHTML = html;
}
</script>

Answer 2

//_table my current table
var table = document.createElement('table'); //new table
table.innerHTML = _table.innerHTML; //clone table innerHTML

如何使用createElement创建新表？

2 个答案: