テーブルのカーソル位置から斜めにハイライトするジャバスクリプト

<table class="text-center w-100">
<?
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__);