我试图通过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);
}
最佳答案
我认为您必须在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);
}