カラーテーブルセルonclick

Question

私には5x5のテーブルがあり、各セルには単語が含まれています。単語をクリックすると、セルの色があらかじめ定義された色に更新されます。下の例では、テーブルには色分けされた色が設定されています。希望するものは、対応する単語がクリックされるまで白くなります。あなたがこれを行うことがjQueryのを使用して

<TABLE BORDER="4" CELLSPACING="4" CELLPADDING="4"> 
    <TR> 
     <TD BGCOLOR="#ffff00">Yellow</TD> 
     <TD BGCOLOR="#00ff00">Green</TD> 
    </TR> 
    <TR> 
     <TD BGCOLOR="#ff00ff">Purple</TD> 
     <TD BGCOLOR="00ffff">Blue</TD> 
    </TR> 
</TABLE> 

Answer 1

：

$('table td').on('click', function() { 
 
    $(this).attr("bgcolor", $(this).attr("data-color")); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<TABLE BORDER=4 CELLSPACING=4 CELLPADDING=4> 
 
<TR> 
 
<TD data-color="#ffff00">Yellow 
 
<TD data-color="#00ff00">Green 
 
</TR> 
 
<TR> 
 
<TD data-color="#ff00ff">Purple 
 
<TD data-color="00ffff">Blue 
 
</TD> 
 
</TR> 
 
</TABLE>

は、大規模プロジェクトのために私はIDによってテーブルを選択お勧めします。

Answer 2

バニラのJavascriptを使用する場合は、単純なonClickイベントリスナーを追加して色を設定できます。色はdata-bgcolor属性に格納する必要があります。

const tableCells = document.querySelectorAll('TD') 
 

 
tableCells.forEach(function (cell) { 
 
    cell.addEventListener('click', function (e) { 
 
    e.target.style.backgroundColor = e.target.dataset.bgcolor; 
 
    }) 
 
})

<TABLE BORDER=4 CELLSPACING=4 CELLPADDING=4> 
 
    <TR> 
 
    <TD data-bgcolor="#ffff00">Yellow</TD> 
 
     <TD data-bgcolor="#00ff00">Green</TD> 
 
    </TR> 
 
    <TR> 
 
    <TD data-bgcolor="#ff00ff">Purple</TD> 
 
     <TD data-bgcolor="#00ffff">Blue</TD> 
 
    </TR> 
 
</TABLE>