Question

我试图通过id="main-table-body"函数调用在表addRow()中添加行，面临document.getElementById()检索undefined的问题。

浏览Stackoverflow我发现了几个类似的问题，但建议的解决方案在我的案例中没有成功。我想问题是，在函数执行的那一刻，还没有创建html文档。但即使我把脚本放在身体标签下面也没有任何反应。如果你让我知道该怎么做，我会非常感激。

HTML：

<html>
<head>
    <meta http-equiv="content-type" content="text/html" charset="utf-8">
    <title>Billing system</title>
    <link rel="stylesheet" href="css/style.css" type="text/css">
    <script src="scripts.js"></script>
</head>
<body>

    <div id="header">
        <table id="contractor-info">
            <tbody>
                <tr><td>Contractor</td><td></td></tr>
                <tr><td>Contract No</td><td></td></tr>
                <tr><td>Balance</td><td></td></tr>
                <tr><td>Orders in progress</td><td></td></tr>
            </tbody>
        </table>
    </div>

    <div id="sidebar">
        <div id="sidebar-buttons">
            <input type="button" id="add-contractor" value="Add contractor"><br>
            <input type="button" id="remove-contractor" value="Remove contractor"><br>
            <input type="button" id="edit-contractor" value="Edit contractor"><br>
        </div>
        <div id="sidebar-list">
            <form>
                <select size="50">
                    <option>Contractor #1</option>
                    <option>Contractor #2</option>
                    <option>Contractor #3</option>
                </select>
            </form>
        </div>
    </div>

    <div id="content">
        <input type="button" name="add-order" value="Add order">
        <input type="submit" name="submit-order" value="Submit changes">
        <input type="button" name="add-payment" value="Add payment">
        <input type="submit" name="submit-payment" value="Submit changes">
        <table id="main-table" contenteditable="true">
            <thead>
                <tr>
                    <th>Contract No</th>
                    <th>Order No</th>
                    <th>Order date</th>
                    <th>Order Amount</th>
                    <th>Invoice No</th>
                    <th>Invoice date</th>
                    <th>Invoice amount</th>
                    <th>Cleared</th>
                </tr>
            </thead>
            <tbody id="main-table-body">
                <tr>

                </tr>
            </tbody>
        </table>
        <table id="payments-table">
            <thead>
                <tr>
                    <th>Amount</th>
                    <th>Date of payment</th>
                    <th>Details</th>
                </tr>
            </thead>
            <tbody id="payments-table-body">

            </tbody>
        </table>
    </div>


</body>

<script>
    addRow();
</script>
</html>

JS：

var contentButtons = document.getElementById('content');
var parentElementMainTable = document.getElementById('main-table-body');

contentButtons.onclick = function(event) {
    var event = event || window.event;
    var target = event.target || event.srcElement;
    if(target.getAttribute('name') == 'add-order') {
        addRow();
    }
}

function addRow() {
    var tr = document.createElement('TR');
    tr.innerHTML = '<tr> \
        <td></td> \
        <td></td> \
        <td></td> \
        <td></td> \
        <td></td> \
        <td></td> \
        <td></td> \
        <td></td> \
        </tr>';
    parentElementMainTable.appendChild(tr);
}

Answer 1

我认为你必须在onload函数中赋值，以确保元素已经加载。我还修改了一下HTML以在按钮上添加ID以及在关闭标记之前的最终/（如果有一天你添加了一个XHTML文档类型）：

<input type="button" name="add-order" value="Add order" />

JS代码：

// List of global variables
var parentElementMainTable = null;
var addOrderBtn = null

// Equivalent to <body onload="yourFunction();">
window.onload = function(){
    // Init globals
    parentElementMainTable = document.getElementById('main-table-body');
    addOrderBtn = document.getElementById("add-order");

    // Add the onclick function to add rows in table
    addOrderBtn.onclick = function(){
        addRow();
    }
}

// Add a row in table
function addRow() {
    var tr = document.createElement('TR');
    tr.innerHTML = '<td></td> \
        <td /> \
        <td /> \
        <td /> \
        <td /> \
        <td /> \
        <td /> \
        <td />';
    parentElementMainTable.appendChild(tr);
}

不要忘记：innerHTML意味着你正在写的那个内部的所有标签。您在TR中附加了TD。无需在innerHTML中编写TR。

编辑：如果你想继续玩DOM，试试这个addRow函数而不是另一个函数（你从DOM createElement开始，尝试继续使用它）：

// Add a row in table
function addRow() {
    // Create the row element
    var tr = document.createElement("tr");

    // Loops on the number of columns in your thead
    // Then creates and append new cell in row
    for (var i = 0; i < parentElementMainTable.offsetParent.tHead.rows[0].cells.length; i++) {
        var td = document.createElement("td");
        tr.appendChild(td);
    }

    // Append the final row to the table
    parentElementMainTable.appendChild(tr);
}

Answer 2

我愿意打赌，当你创建parentElementMainTable时，DOM还没有准备好，所以当你尝试调用“addRows”时，parentElementMainTable是未定义的。

您可以尝试从拥有它的位置删除此变量，并将其添加到“onclick”方法中吗？

var parentElementMainTable = document.getElementById（'main-table-body'）;

然后你的addRow函数会这样做：

function addRow() {
    var tr = document.createElement('TR');
    tr.innerHTML = '<tr> \
        <td></td> \
        <td></td> \
        <td></td> \
        <td></td> \
        <td></td> \
        <td></td> \
        <td></td> \
        <td></td> \
        </tr>';
    document.getElementById('main-table-body').appendChild(tr);
}

Answer 3

假设您的代码最初的结构如下所示（在编辑之前，我已将其移回body并添加了script代码。）：

<script>
    addRow();
</script>
<script>
    var contentButtons = document.getElementById('content');
    var parentElementMainTable = document.getElementById('main-table-body');

    contentButtons.onclick = function(event) {...};
    function addRow() {...};
</script>
</body>
</html>

内联脚本按外观顺序执行。当您在其addRow()标记内进行script调用时，会在该函数存在之前调用该函数，从而导致错误。

实际上，错误消息会告诉您＆＃34; addRow is undefined.＆＃34; （取决于浏览器也可能是＆＃34; addRow is not a function.＆＃34;）

最简单的解决方法是在addRow()之后删除结束起始脚本标记对，这样就可以提升函数和变量声明，并且即使从＆＃34;错误＆＃34;地点。

但是，最好完全删除第一个script，并将addRow()移到代码的末尾。

请注意我在您的问题下方的帖子中对innerHTML tr {{1}}段内所说的内容。

document.getElementById（） - 未定义

3 个答案: