My data is displayed using the jQuery plugin DataTable, and everything appears to be working well. I am retrieving my data from PHP using AJAX. However, I encountered an issue when trying to highlight the row that was hovered over while navigating around the table. The highlighting functionality did not work as expected. Interestingly, when I tested the same script on a different table, it worked perfectly fine. I even tried pausing some of the code in Chrome console, and it seemed to work without any problems. This has left me feeling confused about how to fix this issue. Here is the script I am using:
<script type="text/javascript">
$( document ).ready(function() {
$('#example').dataTable({
"bProcessing": true,
"sAjaxSource": "testConn2008.php",
"bAutoWidth": true,
"aoColumns": [
{ mData: '\u533a\u57df' } ,
{ mData: '\u6708\u4efd' },
{ mData: '\u7535\u8111\u7f16\u53f7' },
{ mData: '\u7528\u6237\u518c\u53f7' } ,
{ mData: '\u6c34\u8868\u7c7b\u578b' }
]
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$("#example tbody tr").mouseover(function() {
$(this).addClass("over");
});
$("#example tbody tr").mouseout(function() {
$(this).removeClass("over");
});
});
</script>
<style type="text/css">
tr.over td{
background: #D6E8F8;
font-weight: bold;
}
</style>