这可能是我缺乏 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 之类的内容,但这不起作用,然后我尝试将 ID 添加到 tbody 节点,但这也不起作用...所以任何可以提供帮助的东西,这样我可以添加另一个带有不同表格的部分...那就太棒了。
最佳答案
因此,此时您将获得页面中的第一个 TBODY 标记:
tabBody=document.getElementsByTagName("TBODY").item(0);
然后构建一行单元格,然后将该行插入到 tbody 中:
tabBody.appendChild(row);
如果您将另一个包含 TBODY 的表格放入页面中,则可以通过以下方式获取第二个表格的 TBODY 标记:
tabBody2=document.getElementsByTagName("TBODY").item(1);
总的来说,尽管您似乎使用了大量的猜测和(可能)剪切粘贴的代码。当你说你尝试过身份证但不起作用时,这有点荒谬。元素上的 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 引用,以了解有关这些命令的更多信息。
关于javascript - 使用 Javascript 在一个网页上动态向多个表添加行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13791861/