$(document).ready(function() { $.ajax({ url: 'https://jsonplaceholder.typicode.com/todos/', dataType: 'json', type: 'get', cache: false, success: function(data) { books_id = []; titles = []; $(data).each(function(index, value) { // if(value.completed) titles[index] = "<td>" + JSON.stringify(value.title) + "</td>"; books_id[index] = "<td>" + JSON.stringify(value.id) + "</td>"; $("#waypointsTable").append("<tr>" + titles[index] + books_id[index] + "</tr>"); }); } }); $('#waypointsTable tr').hover(function() { $(this).addClass('hover'); }, function() { $(this).removeClass('hover'); }); }) 
 table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 5px; text-align: left; } th { padding: 5px; text-align: center; } .hover { background-color: yellow; } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <body> <table style="width:50%" id="waypointsTable"> <caption><b>Sort from JSON to table with jQuery</b></caption> <tr> <th>Title</th> <th>ID</th> </tr> </table> </body>

1 answer 1

Use css

 tr:hover { background-color:yellow; }

If all the same through jq

 $(document).ready(function() { $.ajax({ url: 'https://jsonplaceholder.typicode.com/todos/', dataType: 'json', type: 'get', cache: false, success: function(data) { books_id = []; titles = []; $(data).each(function(index, value) { // if(value.completed) titles[index] = "<td>" + JSON.stringify(value.title) + "</td>"; books_id[index] = "<td>" + JSON.stringify(value.id) + "</td>"; $("#waypointsTable").append("<tr>" + titles[index] + books_id[index] + "</tr>"); }); } }); $(document).on({ mouseenter: function () { $(this).addClass('hover'); }, mouseleave: function () { $(this).removeClass('hover'); } }, "#waypointsTable tr"); }) 
 table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 5px; text-align: left; } th { padding: 5px; text-align: center; } .hover { background-color: yellow; } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <body> <table style="width:50%" id="waypointsTable"> <caption><b>Sort from JSON to table with jQuery</b></caption> <tr> <th>Title</th> <th>ID</th> </tr> </table> </body>

  • So much easier! Thank! - Pavel Silber