javascript - 在 Javascript 中获取表格

Question

我有一张 table :

<div ID="documents_list" style="visibility: hidden;">
    <table style="background-color:#000000;border:0;border-collapse:separate;border-spacing:0px;">
        <tr>
            <td style="padding:0px;">
                <table id="documentsTable" style="border:0;border-collapse:separate;border-spacing:1px;">
                    <tr bgcolor='#ffffff'>
                        <td bgcolor='#cccccc' style="padding:2px;" nowrap>Catalog:</td>
                        <td style="padding:2px;" colspan=3></td>
                    </tr>
                    <tr bgcolor='#ffffff'>
                        <td bgcolor='#cccccc' style="padding:2px;" nowrap>Doc.nr.</td>
                        <td bgcolor='#cccccc' style="padding:2px;" nowrap>Document name</td>
                        <td bgcolor='#cccccc' style="padding:2px;" nowrap></td>
                        <td bgcolor='#cccccc' style="padding:2px;" nowrap></td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    <input type="button" value="Close" onClick="hide_documents_list()">
</div>

我正在尝试从 Javascript 访问它，这样我就可以更改它的内容并向其中添加行。其方法如下:

function show_documents(documents) {
    var table = document.getElementById("documentsTable");
    for (var i=0; i<documents.length; i++) {
        var row = table.insertRow(-1);

        var document = row.insertCell(0);
        var name = row.insertCell(1);
        var button = row.insertCell(2);
        var checkbox = row.insertCell(3);

        document.innerHTML = documents[i].document;
        name.innerHTML = "<a href='${pageContext.request.contextPath}/s?id=" + documents[i].document + "'>" + documents[i].name + "</a>";
        button.innerHTML = "<input type='button' value='Delete'>";
        name.innerHTML = "<input type='checkbox'>";
    }
    show_documents_list();
}

但是每当我尝试调用此方法时，都会收到以下错误Uncaught TypeError: Cannot read property 'getElementById' of undefined。问题是，该元素是在 HTML 中定义的，所以我无法真正找出问题出在哪里。

Answer 1

是的，就像 Tero Tolonen 说的那样。因为hoisting Javascript 在执行时将所有变量声明拉到顶部。

这意味着在代码执行方面您会得到类似的结果:

// because of hoisting variable decalarations get pulled to the top of the scope
var document;

之后，您尝试访问声明的变量上的方法getElementByID。

从而导致类型错误。