更新 2019.7.12 12:40閲覧 601

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

01234567891011121314151617181920
01234567891011121314151617181920
01234567891011121314151617181920
01234567891011121314151617181920
01234567891011121314151617181920
01234567891011121314151617181920
01234567891011121314151617181920
01234567891011121314151617181920
01234567891011121314151617181920
01234567891011121314151617181920
01234567891011121314151617181920
01234567891011121314151617181920
01234567891011121314151617181920
01234567891011121314151617181920
01234567891011121314151617181920
01234567891011121314151617181920
01234567891011121314151617181920
01234567891011121314151617181920
01234567891011121314151617181920
01234567891011121314151617181920
01234567891011121314151617181920
<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__);

コメント

当フォームより収集される個人情報は、返信を要する際に使用されるものであり、法令に基づく行政機関等への提供を除き、ご本人の同意を得ずに第三者に提供することはありません。また、コメントが掲載される場合であってもメールアドレスが本サイト内に記載されることはありません。