0

这可能是我缺乏 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，但这也不起作用......所以任何可以帮助的东西，以便我可以添加另一个有不同桌子的部分......会很棒。

4

1 回答 1

2

因此，目前您正在页面中获得第一个 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 进行相同的尝试。

And finally, none of this is HTML5, it's just plain old boring HTML and Javascript. You can look at the DOM API level 2, HTML4 spec and Javascript reference on mozilla dev to find out more about any of those commands.

于 2012-12-10T02:43:02.153 回答