は、疑似クラスを変更し、次のようにTD

Question

ためのJavaScriptでCSSの前に、私は、TDのためのCSSクラスを持っている：

td { 
    text-align: left; 
    padding: 3px; 
    color:white; 
    background-color:#E3F2ED ; 
    position:relative; 
    z-index:10; 
    border:1px solid #74827D; 
    border-style:solid none; 

} 

td:before{ 
    content:""; 
    position:absolute; 
    z-index:-1; 
    top:2px; 
    left:2px; 
    right:2px; 
    bottom:2px; 
    background:#20936C; 
} 

これは色#20936Cと色#E3F2EDと色の最後のボーダの境界を持つ個々の細胞を作る#74827D 。

ここでは、クリックしたときに1つのセルの色を変更したいと考えています。だから基本的には、私はちょうど赤と言うように:beforeの色を変更したいです。

Answer 1

アイデアは、CSSに

td.active:before { 
    background: red; 
} 

を追加し、クリックされたとき、TDにアクティブ

$(function() { 
 
    $('td').on('click', function() { 
 
     $(this).toggleClass('active') 
 
    }); 
 
});

td { 
 
    text-align: left; 
 
    padding: 3px; 
 
    color: white; 
 
    background-color: #E3F2ED; 
 
    position: relative; 
 
    z-index: 10; 
 
    border: 1px solid #74827D; 
 
    border-style: solid none; 
 
} 
 

 
td:before { 
 
    content: ""; 
 
    position: absolute; 
 
    z-index: -1; 
 
    top: 2px; 
 
    left: 2px; 
 
    right: 2px; 
 
    bottom: 2px; 
 
    background: #20936C; 
 
} 
 

 
td.active:before { 
 
    background: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td>This is an example</td> 
 
    <td>This is an example</td> 
 
    </tr> 
 
</table>

をクラスを追加することです次は

Answer 2

私はあなただけでそのクラスのためにいくつかのCSSを追加し、それらの要素に"clicked"クラスを追加または削除するJSを使用することができると思う：

td.clicked:before{ 
    background:#FF0000; 
} 

CSSのな性質をカスケード接続があなたのメインのスタイルを意味しますtd:beforeセレクタが適用されると、td.clicked:beforeスタイルはbackgroundよりも優先されます。

したがって、このような何か：

document.querySelector("table").addEventListener("click", function(e) { 
 
    if (e.target.nodeName === "TD") 
 
    e.target.classList.toggle("clicked") 
 
})

td { 
 
    text-align: left; 
 
    padding: 3px; 
 
    color:white; 
 
    background-color:#E3F2ED ; 
 
    position:relative; 
 
    z-index:10; 
 
    border:1px solid #74827D; 
 
    border-style:solid none; 
 

 
} 
 

 
td:before{ 
 
    content:""; 
 
    position:absolute; 
 
    z-index:-1; 
 
    top:2px; 
 
    left:2px; 
 
    right:2px; 
 
    bottom:2px; 
 
    background:#20936C; 
 
} 
 
    
 
td.clicked:before{ 
 
    background:#FF0000; 
 
}

<table> 
 
    <tr><td>Click me</td></tr> 
 
    <tr><td>Or me</td></tr> 
 
</table>

Answer 3

他の回答を持っているように、「選択」クラスを切り替えますが、私はそれがイベントの委任を使用し、すべてのセルではなく、テーブルの上にリスナーを置く方が良いと思います。また、このソリューションではプレーンJSを使用します。追加のライブラリは必要ありません。

タグ名を使用する代わりに、選択可能な要素に「選択可能」クラスを追加して、特定のタグ名に限定されないようにフィルタすることができます。

classListプロパティをサポートしていないブラウザのサポートが必要な場合は、それほど難しくありません。多くのクラスの追加/削除/トグルユーティリティが利用できます。

window.onload = function(){ 
 
    document.getElementById('table0').addEventListener('click', toggleCell, false); 
 
} 
 

 
function toggleCell(e) { 
 
    // Get the element that was clicked on 
 
    var tgt = e.target; 
 
    // If it was a TD, toggle the "selected" class 
 
    if (tgt.tagName.toLowerCase() == 'td') { 
 
    tgt.classList.toggle('selected'); 
 
    } 
 
}

.selected { background-color: red; } 
 
td { padding: 10px;}

<table id="table0"> 
 
    <tr><td>a<td>b<td>c 
 
    <tr><td>a<td>b<td>c 
 
    <tr><td>a<td>b<td>c 
 
</table>