I currently have a table where it gets updated every few seconds. This table also has the first row which freezes when you scroll and also highlights the row and column on hover. Everything is working except that when the table gets updated, the hovers are gone. Is there any way to make the highlighted row/column still visible after the table udpates? If so, can it be done without any flicker?
test.php
<script>
$(document).ready(function(){
setInterval(function(){
$("#screen_video").load('test2.php')
}, 2000);
});
</script>
<div id="screen_video">
<div id="content"></div>
<img src="loading.gif" id="loading" alt="loading" style="display:none;" />
</div>
test2.php
<style>
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
html,
body {
margin: 0;
padding: 0;
}
h1,
p {
text-align: center;
}
table{border-collapse:collapse}
td, th{padding:5px;border:solid black 1px;}
.hover_class{background:silver;}
#table_grid {
border-spacing: 0;
border-collapse: collapse;
font-family: arial, verdana, sans-serif;
font-size: 1rem;
margin: auto;
text-align: left;
max-width: 1200px;
width: 100%;
border-radius: 10px;
}
#table_grid td,
#table_grid th {
padding: 9px 8px 4px 8px;
padding: 0.25rem;
}
#table_grid tr.red th {
background: red;
}
#table_grid tr.red:hover th {
background: orange;
}
#table_grid tr.red:hover th:hover {
background: teal;
}
#table_grid tr:hover > td {
background-color: rgba(220, 220, 220, 0.5);
}
#table_grid .thead,
#table_grid tr.red,
#table_grid tr.red th {
position: -webkit-sticky;
position: sticky;
z-index: 2;
top: 0;
}
</style>
<!--highlights-->
<script type="text/javascript">
$(document).ready(function()
{
var cellClassName = false;
$("td, th").hover
(
function()
{
cellClassName = $(this).attr("class");
$("." + cellClassName).addClass("hover_class");
},
function()
{
$("." + cellClassName).removeClass("hover_class");
}
);
});
</script>
<h1>Test</h1>
<table id="table_grid">
<thead class="thead">
<tr class="red">
<th class="col1">test</th>
<th class="col2">test</th>
<th class="col3">test</th>
<th class="col4">test</th>
<th class="col5">test</th>
<th class="col6">test</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col1">test</td>
<td class="col2">test</td>
<td class="col3">test</td>
<td class="col4">test</td>
<td class="col5">test</td>
<td class="col6">test</td>
</tr>
<tr>
<td class="col1">test</td>
<td class="col2">test</td>
<td class="col3">test</td>
<td class="col4">test</td>
<td class="col5">test</td>
<td class="col6">test</td>
</tr> <tr>
<td class="col1">test</td>
<td class="col2">test</td>
<td class="col3">test</td>
<td class="col4">test</td>
<td class="col5">test</td>
<td class="col6">test</td>
</tr> <tr>
<td class="col1">test</td>
<td class="col2">test</td>
<td class="col3">test</td>
<td class="col4">test</td>
<td class="col5">test</td>
<td class="col6">test</td>
</tr> <tr>
<td class="col1">test</td>
<td class="col2">test</td>
<td class="col3">test</td>
<td class="col4">test</td>
<td class="col5">test</td>
<td class="col6">test</td>
</tr> <tr>
<td class="col1">test</td>
<td class="col2">test</td>
<td class="col3">test</td>
<td class="col4">test</td>
<td class="col5">test</td>
<td class="col6">test</td>
</tr> <tr>
<td class="col1">test</td>
<td class="col2">test</td>
<td class="col3">test</td>
<td class="col4">test</td>
<td class="col5">test</td>
<td class="col6">test</td>
</tr> <tr>
<td class="col1">test</td>
<td class="col2">test</td>
<td class="col3">test</td>
<td class="col4">test</td>
<td class="col5">test</td>
<td class="col6">test</td>
</tr> <tr>
<td class="col1">test</td>
<td class="col2">test</td>
<td class="col3">test</td>
<td class="col4">test</td>
<td class="col5">test</td>
<td class="col6">test</td>
</tr> <tr>
<td class="col1">test</td>
<td class="col2">test</td>
<td class="col3">test</td>
<td class="col4">test</td>
<td class="col5">test</td>
<td class="col6">test</td>
</tr> <tr>
<td class="col1">test</td>
<td class="col2">test</td>
<td class="col3">test</td>
<td class="col4">test</td>
<td class="col5">test</td>
<td class="col6">test</td>
</tr> <tr>
<td class="col1">test</td>
<td class="col2">test</td>
<td class="col3">test</td>
<td class="col4">test</td>
<td class="col5">test</td>
<td class="col6">test</td>
</tr> <tr>
<td class="col1">test</td>
<td class="col2">test</td>
<td class="col3">test</td>
<td class="col4">test</td>
<td class="col5">test</td>
<td class="col6">test</td>
</tr> <tr>
<td class="col1">test</td>
<td class="col2">test</td>
<td class="col3">test</td>
<td class="col4">test</td>
<td class="col5">test</td>
<td class="col6">test</td>
</tr> <tr>
<td class="col1">test</td>
<td class="col2">test</td>
<td class="col3">test</td>
<td class="col4">test</td>
<td class="col5">test</td>
<td class="col6">test</td>
</tr> <tr>
<td class="col1">test</td>
<td class="col2">test</td>
<td class="col3">test</td>
<td class="col4">test</td>
<td class="col5">test</td>
<td class="col6">test</td>
</tr> <tr>
<td class="col1">test</td>
<td class="col2">test</td>
<td class="col3">test</td>
<td class="col4">test</td>
<td class="col5">test</td>
<td class="col6">test</td>
</tr> <tr>
<td class="col1">test</td>
<td class="col2">test</td>
<td class="col3">test</td>
<td class="col4">test</td>
<td class="col5">test</td>
<td class="col6">test</td>
</tr> <tr>
<td class="col1">test</td>
<td class="col2">test</td>
<td class="col3">test</td>
<td class="col4">test</td>
<td class="col5">test</td>
<td class="col6">test</td>
</tr> <tr>
<td class="col1">test</td>
<td class="col2">test</td>
<td class="col3">test</td>
<td class="col4">test</td>
<td class="col5">test</td>
<td class="col6">test</td>
</tr> <tr>
<td class="col1">test</td>
<td class="col2">test</td>
<td class="col3">test</td>
<td class="col4">test</td>
<td class="col5">test</td>
<td class="col6">test</td>
</tr> <tr>
<td class="col1">test</td>
<td class="col2">test</td>
<td class="col3">test</td>
<td class="col4">test</td>
<td class="col5">test</td>
<td class="col6">test</td>
</tr> <tr>
<td class="col1">test</td>
<td class="col2">test</td>
<td class="col3">test</td>
<td class="col4">test</td>
<td class="col5">test</td>
<td class="col6">test</td>
</tr> <tr>
<td class="col1">test</td>
<td class="col2">test</td>
<td class="col3">test</td>
<td class="col4">test</td>
<td class="col5">test</td>
<td class="col6">test</td>
</tr> <tr>
<td class="col1">test</td>
<td class="col2">test</td>
<td class="col3">test</td>
<td class="col4">test</td>
<td class="col5">test</td>
<td class="col6">test</td>
</tr> <tr>
<td class="col1">test</td>
<td class="col2">test</td>
<td class="col3">test</td>
<td class="col4">test</td>
<td class="col5">test</td>
<td class="col6">test</td>
</tr> <tr>
<td class="col1">test</td>
<td class="col2">test</td>
<td class="col3">test</td>
<td class="col4">test</td>
<td class="col5">test</td>
<td class="col6">test</td>
</tr> <tr>
<td class="col1">test</td>
<td class="col2">test</td>
<td class="col3">test</td>
<td class="col4">test</td>
<td class="col5">test</td>
<td class="col6">test</td>
</tr> <tr>
<td class="col1">test</td>
<td class="col2">test</td>
<td class="col3">test</td>
<td class="col4">test</td>
<td class="col5">test</td>
<td class="col6">test</td>
</tr> <tr>
<td class="col1">test</td>
<td class="col2">test</td>
<td class="col3">test</td>
<td class="col4">test</td>
<td class="col5">test</td>
<td class="col6">test</td>
</tr> <tr>
<td class="col1">test</td>
<td class="col2">test</td>
<td class="col3">test</td>
<td class="col4">test</td>
<td class="col5">test</td>
<td class="col6">test</td>
</tr> <tr>
<td class="col1">test</td>
<td class="col2">test</td>
<td class="col3">test</td>
<td class="col4">test</td>
<td class="col5">test</td>
<td class="col6">test</td>
</tr> <tr>
<td class="col1">test</td>
<td class="col2">test</td>
<td class="col3">test</td>
<td class="col4">test</td>
<td class="col5">test</td>
<td class="col6">test</td>
</tr> <tr>
<td class="col1">test</td>
<td class="col2">test</td>
<td class="col3">test</td>
<td class="col4">test</td>
<td class="col5">test</td>
<td class="col6">test</td>
</tr> <tr>
<td class="col1">test</td>
<td class="col2">test</td>
<td class="col3">test</td>
<td class="col4">test</td>
<td class="col5">test</td>
<td class="col6">test</td>
</tr> <tr>
<td class="col1">test</td>
<td class="col2">test</td>
<td class="col3">test</td>
<td class="col4">test</td>
<td class="col5">test</td>
<td class="col6">test</td>
</tr> <tr>
<td class="col1">test</td>
<td class="col2">test</td>
<td class="col3">test</td>
<td class="col4">test</td>
<td class="col5">test</td>
<td class="col6">test</td>
</tr> <tr>
<td class="col1">test</td>
<td class="col2">test</td>
<td class="col3">test</td>
<td class="col4">test</td>
<td class="col5">test</td>
<td class="col6">test</td>
</tr> </tbody></table>