如何使用数组将包含数据的行添加到 html table 中，函数部分工作

Question

非常感谢您的帮助。我正在尝试将新行添加到 html table 中，在单击按钮时，它会随机添加行。我的添加函数无法将数组中的数据添加到行，而是创建行。

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];
}
}

Answer 1

首先，你打错了 getElementById() void，应该是 .member 而不是 .members。在您的 randomElement 变量需要进入您的函数之后，否则此变量的 return 值将始终相同。最后，由于 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>

如何使用数组将包含数据的行添加到 html table 中，函数部分工作

How to add a row with data into html table using array, function partly working

html

javascript

arrays

innerhtml