CODEWITHSUNDEEP
javascripthtmlarraysinnerhtml
ika
ika

Reputation: 73

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

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

Upvotes: 0

Views: 686

Answers (1)

Maestro
Maestro

Reputation: 865

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>

Upvotes: 2

Related Questions