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

Question

I would appreciate the help. I am trying to add new rows into a html table, where on click button, it adds row at random. My add function is not able to add the data from the array to row but creates the rows.

HTML Code

<!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>[email protected]</td><td><button type="button" onclick="deleteRow(this)">Delete</button></td> 
    </tr>
     <tr>
        <td>Mima T</td><td>[email protected]</td><td><button type="button" onclick="deleteRow(this)">Delete</button></td> 
    </tr>
</table>
<button type="button" onclick="addFunction()">Click Me!</button>

JavaScript Code

// function deleteRow(r) {
//     var i = r.parentNode.parentNode.rowIndex;
//   document.getElementById("member").deleteRow(i);
// }
}

 var dataArray = [{
name: "Brandon I",
email: "[email protected]",
remove: "<button type='button' onclick='deleteRow(this)'>Delete</button>"     
 }, {
name: "John Bishops",
email: "[email protected]",
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];
}
}

Maestro · Accepted Answer · 2020-07-21 09:59:50Z

2

First of all, u have typo on getElementById() void, it should be .member rather than .members. After your randomElement variable needs to be into your function, otherwise return value of this variable will be always the same. And finally, you can directly access your properties object dataArray thanks to randomElement variable in order to set your content. Complete code :

let dataArray = [{
    name: "Brandon I",
    email: "[email protected]",
    remove: "<button type='button' onclick='deleteRow(this)'>Delete</button>"     
 }, {
    name: "John Bishops",
    email: "[email protected]",
    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>[email protected]</td><td><button type="button" onclick="deleteRow(this)">Delete</button></td> 
            </tr>
            <tr>
                <td>Mima T</td><td>[email protected]</td><td><button type="button" onclick="deleteRow(this)">Delete</button></td> 
            </tr>
        </table>
        <button type="button" onclick="addFunction()">Click Me!</button>
    </body>
</html>

edited Jul 21, 2020 at 9:59

answered Jul 20, 2020 at 15:39

Maestro

8551 gold badge7 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

ika Over a year ago

Thank you so much, that really solved my problem. I was just not able to form code properly. The only issue is now that it produces 2 rows (duplicate) with click button. Could you help me limiting it to 1 row per click, please? @maestro

Maestro Over a year ago

No problem, happy to help :)

Maestro Over a year ago

I edited my code so that there is only one row added per click @ika

ika Over a year ago

Thank you so much, that's really appreciated. :) @maestro

Maestro Over a year ago

Glad I helped you ;)

Collectives™ on Stack Overflow

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

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related