Applying Bootstrap table-striped to dynamic table not working - html

Question

Creating a dynamic table where pageList has variable length with each response. Attempting to apply Bootstrap's table-striped class however this styling seems to not work. Any thoughts? I've looked at other examples but they don't seem to match what is going on here :
<div class="container-fluid">
<div class="table-responsive">
<table class="table table-outline table-striped table-hover">
<thead>
<tr>
<th>Name</th>
<th>Address</th>
<th>Email</th>
</tr>
</thead>
<tbody style="background-color: white; ">
<tr>
<td class="name"></td>
<td class="address"></td>
<td class="email"></td>
</tr>
</tbody>
</table>
</div>
</div>
/////
for (r = 0; r < pageList.length; r++) {
$('.name').append("<br>" + fullName + "<br>");
$('.address').append("<br>" + homeAddress + "<br>");
$('.email').append("<br>" + "$" + personalEmail + "<br>");
}

Answer 1

So there appear to be a few issues with your example code.
The main issue is that your for loop does not add any rows to the table. Each iteration through the loop should add a <tr>, a child <td> and the data in the table cell.
The background-color: white; is unnecessary
Your for loop is iterating over pageList. However, it does not appear to actually assign the next element in the pageList to a variable. Presumably each element is an object containing an object with fields for fullName, homeAddress and personalEmail.
Based on this assumption, you can use code similar to the example below to create a dynamic table.
var pageList = [{
fullName: "John Doe",
homeAddress: "13 Home St",
personalEmail: "you#mail.com"
},
{
fullName: "Jane Doe",
homeAddress: "55 Work St",
personalEmail: "me#mail.com"
}
];
for (r = 0; r < pageList.length; r++) {
var e = pageList[r];
var tbody = $("#theTable tbody");
tbody.append("<tr><td>" + e.fullName + "</td><td>" + e.homeAddress + "</td><td>" + e.personalEmail + "</td></tr>");
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="table-responsive">
<table id="theTable" class="table table-outline table-striped table-hover">
<thead>
<tr>
<th>Name</th>
<th>Address</th>
<th>Email</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>

Answer 2

In your example, you're only appending the new values to the existing row in the table. Instead, you should insert a new row for each item.
Something like:
var pageList = [
{
fullName: 'TestName1',
homeAddress: 'TestAddress1',
personalEmail: 'TestEmail1'
},
{
fullName: 'TestName2',
homeAddress: 'TestAddress2',
personalEmail: 'TestEmail2'
}
];
var table = document.getElementsByTagName("table")[0].getElementsByTagName("tbody")[0];
for(const item of pageList) {
var row = table.insertRow(0);
var nameCell = row.insertCell(0);
var addressCell = row.insertCell(1);
var emailCell = row.insertCell(2);
nameCell.className = 'name';
addressCell.className = 'address';
emailCell.className = 'email';
nameCell.innerText = item.fullName;
addressCell.innerText = item.homeAddress;
emailCell.innerText = item.personalEmail;
}