使用Javascript在一个网页上动态向多个表添加行

Question

这可能是我缺乏使用 html5 的经验，但我有一些代码非常适合使用 Javascript 和 TBODY 标记节点将行动态添加到表中，但是当我有多个表时（我会这样做）在我需要在输入数据时动态填充的页面上......它不起作用......

我的问题是我不知道如何参考我也想添加信息的部分。

我尝试创建一个带有特定标签的节点，但它不是一个可识别的标签，所以它添加了数据但不在表内......奇怪。

这是我正在使用的 Javascript 代码

document.getElementById("sendNoteToDispatch").onclick=function()
    {
        event.preventDefault();
        console.log("Made it to note entry.");
        var noteTxt = $('#noteEntry').val();
        var noteEntBy = 'BGM';
        var nowNote = Date();
        var noteEntDate = dateFormat(nowNote, "mm/dd/yyyy HH:MM:ss");
        if (!document.getElementsByTagName) return;
        tabBody=document.getElementsByTagName("TBODY").item(0);
        row=document.createElement("TR");
        cell1=document.createElement("TD");
        cell2=document.createElement("TD");
        cell3=document.createElement("TD");
        textnode1=document.createTextNode(noteEntDate);
        textnode2=document.createTextNode(noteEntBy);
        textnode3=document.createTextNode(noteTxt);
        cell1.appendChild(textnode1);
        cell2.appendChild(textnode2);
        cell3.appendChild(textnode3);
        row.appendChild(cell1);
        row.appendChild(cell2);
        row.appendChild(cell3);
        tabBody.appendChild(row);
        document.getElementById("noteEntry").value = '';
        document.getElementById("noteEntry").focus();
       }

});

这是它使用的 html 代码。

<div id="Notes" class='acceptEnterNotes'>
            <form>
                <input type="text" name="noteEntry" id="noteEntry" class="noteEntryField" placeholder="Note Entry" size="115" />
                <button type="submit" id="sendNoteToDispatch" class="noteEntryButton buttonAddNote" value="Submit">
                    Submit Note
                </button>
            </form>
            <br />
            <br />
            <div id="filterNotesGriddiv">
                <input type="text" name="filterNotesGrid" id="filterNotesGrid" class="tableFilterInput" size="75" placeholder="Search the Table Below..." />
            </div>
            <div id="notesEntered">
                <table id="notesEnteredGrid" class="lowerSectionTable">
                    <tbody>
                        <tr class="enteredNotesHeader">
                            <td class="tableHeaderCells cellDateEntered">Date Entered</td><td class="tableHeaderCells cellEnteredBy">Entered by</td><td class="tableHeaderCells cellNoteEntered">Note</td>
                        </tr>
                    </tbody>
                </table>

            </div>

        </div>

我尝试将 tbody 标记更改为 tbodyNotes 之类的标记，但这不起作用，然后我尝试向 tbody 节点添加一个 ID，但这也不起作用......所以任何可以提供帮助的东西，所以我可以用不同的表格添加另一个部分……太棒了。

Answer 1

所以现在你在页面中获得了第一个 TBODY 标记：

tabBody=document.getElementsByTagName("TBODY").item(0);

然后构建一行单元格，然后将该行插入到 tbody 中：

tabBody.appendChild(row);

如果您将另一个表放入您的页面中，其中包含一个 TBODY，您可以获得第二个表的 TBODY 标记：

tabBody2=document.getElementsByTagName("TBODY").item(1);

一般来说，尽管您似乎使用了大量的猜测和（可能）剪切和粘贴的代码。当您说您尝试过 ID 并且它们不起作用时，这有点荒谬。元素上的 ID 可以正常工作，即使是 TBODY 标签。如果有疑问，请尝试首先从 firebug 或 chromebug 控制台调用它们，并获取您的代码行以使 TBODY 标记首先在那里工作，然后将其放入您的代码中。 试试这个：将两个带有 tbody 的表放入您的 html 页面。给 tbody 标签 id，比如“tbody1”和“tbody2”，然后打开你的 firebug 控制台并输入： document.getElementById("tbody1") 将鼠标悬停在结果上以查看页面中突出显示的元素。然后对 tbody2 进行同样的尝试。

最后，这些都不是 HTML5，它只是普通的、无聊的 HTML 和 Javascript。您可以在 mozilla dev 上查看 DOM API 级别 2、HTML4 规范和 Javascript 参考，以了解有关这些命令的更多信息。