我正尝试使用JavaScript将更多数据添加到下表中。
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Home Page</title>
<script type="text/javascript" src="assets/style.js"></script>
</head>
<body>
<br><br><br><br><br>
<input type="text" id="personName" autofocus>
<button type="button" onclick="addData();">Append Information</button> <br><br><br><br><br>
<table>
<tr>
<th>Client Name</th>
</tr>
<tr>
<td>James Bond 007</td>
</tr>
<div id="addDataHere">
</div>
</table>
</body>
</html>
function addData(){
var personName = document.getElementById("personName").value;
//console.log(personName);
var getOlderInformation = document.getElementById("addDataHere").innerHTML;
document.getElementById("addDataHere").innerHTML = getOlderInformation + "<tr><td>" + personName + "</tr></td>";
}
客户名称
詹姆斯·邦德007
汤姆·克鲁斯
.....................
............
............
............
答案 0 :(得分：1)
这应该使您入门。
function addData() {
var personName = document.getElementById("personName").value;
var newRow = document.createElement("tr");
var newCell = document.createElement("td");
newCell.innerHTML = personName;
newRow.append(newCell);
document.getElementById("rows").appendChild(newRow);
document.getElementById("personName").value = '';
} <input type="text" id="personName" autofocus>
<button type="button" onclick="addData();">Append Information</button> <br><br><br><br><br>
<table>
<tr>
<th>Client Name</th>
</tr>
<tbody id="rows">
<tr>
<td>James Bond 007</td>
</tr>
</tbody>
</table>
您在正确的路径上，但是重要的一点是您正在尝试在表内部使用div。表格具有非常特殊的结构，如果要使其正确呈现，必须对其进行匹配。
您可以将div元素放在td或th中，但不能放在table元素本身中。查看此链接：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table
答案 1 :(得分：0)
您要使用appendchild。检查一下一些 很好的例子https://www.w3schools.com/jsref/met_node_appendchild.asp。您想遍历数据，向表中添加一行，一次添加一行
答案 2 :(得分：0)
您可以使用与尝试的方法类似的方法：获取innerHTML，附加一些新的html，然后替换innerHTML。但是，您需要获取innerHTML中的table（而不是嵌套在其中的元素）。
例如（用事件监听器替换了button onclick）。
const personName = document.getElementById('personName');
const appendButton = document.getElementById('appendButton');
const nameTable = document.getElementById('nameTable');
appendButton.addEventListener('click', (event) => {
let content = nameTable.innerHTML;
content += '<tr><td>' + personName.value + '</td></tr>';
nameTable.innerHTML = content;
});<input type="text" id="personName" autofocus>
<button type="button" id="appendButton">Append Information</button>
<table id="nameTable">
<tr>
<th>Client Name</th>
</tr>
<tr>
<td>James Bond 007</td>
</tr>
</table>
根据您所做工作的复杂性，如果您还使用use createElement，则走其他答案中建议的appendChild / createDocumentFragment路线可能会更快。另一个例子：
appendButton.addEventListener('click', (event) => {
let frag = document.createDocumentFragment();
let tr = document.createElement('tr');
let td = document.createElement('td');
td.appendChild(document.createTextNode(personName.value));
tr.appendChild(td);
frag.appendChild(tr);
nameTable.appendChild(frag);
});<input type="text" id="personName" autofocus>
<button type="button" id="appendButton">Append Information</button>
<table id="nameTable">
<tr>
<th>Client Name</th>
</tr>
<tr>
<td>James Bond 007</td>
</tr>
</table>
答案 3 :(得分：0)
您可以使用列表来匹配所需的代码
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Home Page</title>
</head>
<body>
<input type="text" id="personName" autofocus>
<button type="button" onclick="addData();">Append Information</button>
<p>Client Name</p>
<ul id="mylist">
<li>James Bond 007</li>
</ul>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
并使用adddata（）这样的功能代码 `function addData（）{
var mylist=document.getElementById("mylist");
var personName=document.getElementById("personName").value;
var node = document.createElement("LI");
var textnode = document.createTextNode(personName);
node.appendChild(textnode);
mylist.appendChild(node);
}`
希望对您有所帮助：）