Question

我有一个我在div中创建的表。在按钮上单击正在div中创建的表。这是我用来创建一个空div的html代码，当打开页面时：

<div id="historyTableDiv">    
</div>

这是我单击按钮在div中创建表时执行的Javascript代码：

function createTable()
{
    var text = 'ID: TEST<br>';
    var thead = '<table><thead><tr><td>#</td><td>Name</td></tr></thead><tbody>';
    var tbody = '<tr>';
    tbody += '<td>Test ID</td>';        
    tbody += '<td>Test Name</td>';
    var tfooter = '</tr></tbody></table>';
    document.getElementById('historyTableDiv').innerHTML = text + thead + tbody + tfooter;
}

表格创建得很好。唯一的问题是文本"undefined"显示在文本"ID: TEST"和表格之间。我完全不知道这是从哪里来的。

额外信息：我的页面上有6个div。拥有所有不同的身份证。我使用createTable()函数。为了在不同的div和每个表格上方显示相同的表格，文本＆＃34; undefined＆＃34;出现了。

当我检查元素时，我看到这个div的nodeValue属性的值为＃34; undefined＆＃34;当我将此文本更改为＆＃34; test＆＃34;文本＆＃34;测试＆＃34;显示而不是未定义。

Answer 1

上面的代码没有问题，可能是其他部分的问题。你能分享完整的html和js代码吗？

以下代码适用于我。

   <html>
        <head></head>
        <body>
            <p><button onclick="createTable()">Create Table</button></p>
            <div id="historyTableDiv">
            </div>
            <script type="text/javascript">
                function createTable() {
                    var text = 'ID: TEST<br>';
                    var thead = '<table><thead><tr><td>#</td><td>Name</td></tr></thead><tbody>';
                    var tbody = '<tr>';
                    tbody += '<td>Test ID</td>';        
                    tbody += '<td>Test Name</td>';
                    var tfooter = '</tr></tbody></table>';
                    document.getElementById('historyTableDiv').innerHTML = text + thead + tbody + tfooter;
                }
            </script>
        </body>
    </html>

Answer 2

我通过在将内容传递给innerHTML属性后编辑div的第一个节点的值来解决问题。我仍然不知道造成这种情况的原因。

document.getElementById('historyTableDiv').innerHTML = text + thead + tbody + tfooter;
document.getElementById('historyTableDiv').childNodes[0].nodeValue = null;

在div中创建表时。文本“未定义”显示无缘无故

2 个答案: