How to highlight newly added table rows?

Question

When I add new data to the table, the data does not want to be highlighted. The data in the row that is entered there without the function is highlighted without any problem. Can you show me why my code doesn't work. Thanks a lot.

First function add row to my table with data. We also have a loop that is responsible for highlighting the line.The second loop takes off the animation from the line.

 $("#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> 

Answer 1

If I understand your problem correctly then the mouseover 'highlighting' should be done in your css file or style tag, not using JavaScript event listeners.

#personalTable tr:not(:first-child):hover { 
   background-color: orange;
   height: 40px;
   transform: scale(1.05)
}

And remove the two for loops.

Answer 2

You should add the events to your new add elements to. here is an example of what you are looking for:

 $("#SaveNewDataTable").click(function () { var fname = $("#FirstName").val(); var lname = $("#LastName").val(); var pnumber = $("#PhoneNumber").val(); var FnameTD = document.createElement("td"); var lnameTD = document.createElement("td"); var pnumberTD = document.createElement("td"); FnameTD.append(fname); lnameTD.append(lname); pnumberTD.append(pnumber); var tr = document.createElement("tr"); tr.append(FnameTD); tr.append(lnameTD); tr.append(pnumberTD); $(tr).appendTo($("#personalTable")); $("#personalTable tbody").append(tr); $("#FirstName").val(''); $("#LastName").val(''); $("#PhoneNumber").val(''); addEventsToRow(tr); // Here you will add your events to your new row }); // this function will add your events to a specific row function addEventsToRow(tr) { tr.addEventListener('mouseover',function(e){ $(this).css('height','40px'); $(this).css('background','orange'); $(this).css('transform','scale(1.05)'); }) tr.addEventListener('mouseout',function(e){ $(this).css('height',''); $(this).css('background',''); $(this).css('transform',''); }) } // here you will add your events to your tables default rows. var tablerows = $('tr').not(":first"); for(var i= 0; i <tablerows.length; i+=1) addEventsToRow( tablerows[i]) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="FirstName"/> <input id="LastName"/> <input id="PhoneNumber"/> <button id="SaveNewDataTable">SaveNewDataTable</button> <table class="table table-dark" id="personalTable"> <thead> <tr> <th scope="col">First Name</th> <th scope="col">Last name</th> <th scope="col">Phone number</th> </tr> </thead> <tbody> <tr> <td>Mark</td> <td>Otto</td> <td>231-183-215</td> </tr> <tr> <td>Jacob</td> <td>Thornton</td> <td>795-138-965</td> </tr> <tr> <td>Larry</td> <td>Bird</td> <td>695-188-265</td> </tr> </tbody> </table> 

Answer 3

One really easy way to do this is just using css rather than jquery.

tr:hover {
   background: yellow;
}