Whenever I input new data into my table, the data does not get highlighted as expected. However, the existing data in the table gets highlighted with no issues. Can you please help me troubleshoot why my code is not functioning correctly? Thank you.
The first function adds a new row to my table with the entered data. There is also a loop responsible for highlighting the row. Another loop removes the highlighting effect from the row.
$("#SaveNewDataTable").click(function() {
var fname = $("#FirstName").val();
var lname = $("#LastName").val();
var FnameTD = document.createElement("td");
var lnameTD = document.createElement("td");
FnameTD.append(fname);
lnameTD.append(lname);
var tr = document.createElement("tr");
tr.append(FnameTD);
tr.append(lnameTD);
$(tr).appendTo($("#personalTable"));
$("#personalTable tbody").append(tr);
$("#FirstName").val('');
$("#LastName").val('');
});
var tablerows = $('tr').not(":first");
for (var i = 0; i < tablerows.length; i += 1) {
tablerows[i].addEventListener('mouseover', function(e) {
$(this).css('height', '40px');
$(this).css('background', 'orange');
$(this).css('transform', 'scale(1.05)');
})
}
for (var i = 0; i < tablerows.length; i += 1) {
tablerows[i].addEventListener('mouseout', function(e) {
$(this).css('height', '');
$(this).css('background', '');
$(this).css('transform', '');
})
}body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#banner-message {
background: #fff;
border-radius: 4px;
padding: 20px;
font-size: 25px;
text-align: center;
transition: all 0.2s;
margin: 0 auto;
width: 300px;
}
button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
#banner-message.alt {
background: #0084ff;
color: #fff;
margin-top: 40px;
width: 200px;
}
#banner-message.alt button {
background: #fff;
color: #000;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<table class="table table-dark" id="personalTable">
<thead>
<tr>
<th scope="col">First Name</th>
<th scope="col">Last name</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mark</td>
<td>Otto</td>
</tr>
<tr>
<td>Jacob</td>
<td>Thornton</td>
</tr>
<tr>
<td>Larry</td>
<td>Bird</td>
</tr>
</tbody>
</table>
<input id="FirstName">
<input id="LastName">
<button id="SaveNewDataTable">
add
</button>