如何使用数组将带有数据的行添加到html表中，函数部分工作
Posted
技术标签:
【中文标题】如何使用数组将带有数据的行添加到html表中，函数部分工作【英文标题】：How to add a row with data into html table using array, function partly working 【发布时间】：2020-11-09 21:27:07 【问题描述】：我将不胜感激。我正在尝试将新行添加到 html 表中，在单击按钮上，它会随机添加行。我的 add 函数无法将数组中的数据添加到行，但会创建行。
HTML 代码
<!DOCTYPE html>
<html>
<head>
<script src="./javascript1.js"></script>
</head>
<body>
<table id="member">
<tr>
<th>Name</th><th>Email</th><th>Remove</th>
</tr>
<tr>
<td>Iza K</td><td>iza@mail.com</td><td><button type="button" onclick="deleteRow(this)">Delete</button></td>
</tr>
<tr>
<td>Mima T</td><td>mimat@mail.com</td><td><button type="button" onclick="deleteRow(this)">Delete</button></td>
</tr>
</table>
<button type="button" onclick="addFunction()">Click Me!</button>
JavaScript 代码
// function deleteRow(r)
// var i = r.parentNode.parentNode.rowIndex;
// document.getElementById("member").deleteRow(i);
//
var dataArray = [
name: "Brandon I",
email: "b.i@mail.com",
remove: "<button type='button' onclick='deleteRow(this)'>Delete</button>"
,
name: "John Bishops",
email: "johnb@mail.com",
remove: "<button type='button' onclick='deleteRow(this)'>Delete</button>"
];
// need to add to select user at random when clicked add button
const randomElement = dataArray[Math.floor(Math.random() * dataArray.length)];
function addFunction()
var table = document.getElementById('members');
for (var i = 0; i < dataArray.length; i++)
var row = table.insertRow(-1);
var name = row.insertCell(0);
var email = row.insertCell(1);
var remove = row.insertCell(2);
name.innerHTML = dataArry[0];
email.innerHTML = dataArray[0];
remove.innerHTML = dataArray[0];
【问题讨论】：
【参考方案1】：首先，你在getElementById() void 上有错字，应该是.member 而不是.members。在您的randomElement 变量需要进入您的函数之后，否则该变量的返回值将始终相同。最后，您可以通过randomElement 变量直接访问您的属性对象dataArray 以设置您的内容。
完整代码：
let dataArray = [
name: "Brandon I",
email: "b.i@mail.com",
remove: "<button type='button' onclick='deleteRow(this)'>Delete</button>"
,
name: "John Bishops",
email: "johnb@mail.com",
remove: "<button type='button' onclick='deleteRow(this)'>Delete</button>"
];
function addFunction()
// need to add to select user at random when clicked add button
const randomElement = dataArray[Math.floor(Math.random() * dataArray.length)];
var table = document.getElementById('member');
var row = table.insertRow(-1);
var name = row.insertCell(0);
var email = row.insertCell(1);
var remove = row.insertCell(2);
name.innerHTML = randomElement.name;
email.innerHTML = randomElement.email;
remove.innerHTML = randomElement.remove;
<html>
<head>
</head>
<body>
<table id="member">
<tr>
<th>Name</th><th>Email</th><th>Remove</th>
</tr>
<tr>
<td>Iza K</td><td>iza@mail.com</td><td><button type="button" onclick="deleteRow(this)">Delete</button></td>
</tr>
<tr>
<td>Mima T</td><td>mimat@mail.com</td><td><button type="button" onclick="deleteRow(this)">Delete</button></td>
</tr>
</table>
<button type="button" onclick="addFunction()">Click Me!</button>
</body>
</html>【讨论】：
非常感谢，这真的解决了我的问题。我只是无法正确地形成代码。现在唯一的问题是它通过单击按钮生成 2 行（重复）。请您帮我将其限制为每次点击 1 行好吗？ @大师 没问题，乐于助人:) 我编辑了我的代码，每次点击只添加一行@ika 非常感谢，非常感谢。 :) @maestro 很高兴我帮助了你 ;)以上是关于如何使用数组将带有数据的行添加到html表中，函数部分工作的主要内容，如果未能解决你的问题，请参考以下文章
如何将 JSON 数组（或 JSON 数组）传递给 pg 函数以插入到表中？