<?
for ($i=0; $i<=20; ++$i)
{
echo '<tr>';
for ($j=0; $j<=20; ++$j)
{
echo '<td>', $j, '</td>';
}
echo '</tr>';
}
?>
</table>
<script>
let t=document.querySelectorAll('td, th'), d=function (e, c='inherit')
{
let l=e.parentNode.cells.length, k=t.length;
for (j=Number(e.dataset.value); j>=0; j-=(l+1))
if (t[j]) t[j].style.backgroundColor = c;
for (j=Number(e.dataset.value); k>=j; j+=(l+1))
if (t[j]) t[j].style.backgroundColor = c;
for (j=Number(e.dataset.value); j>=0; j-=(l-1))
if (t[j]) t[j].style.backgroundColor = c;
for (j=Number(e.dataset.value); k>=j; j+=(l-1))
if (t[j]) t[j].style.backgroundColor = c;
e.style.backgroundColor = 'inherit';
};
for (i=t.length; --i>=0;)
{
t[i].dataset.value = t[i].innerText = i;
t[i].onmouseover = function(){d(this, 'red')};
t[i].onmouseout = function(){d(this)};
}
</script><?highlight_file(__FILE__);