0
このコードは2つのことを行うために作成したものです。最初は、チェックボックスがクリックされたときにテーブルレコードを強調表示することです。 2つ目は、ページを更新しても結果を記憶することです。縦に変更する方法<tr>を水平に変更する<tr>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<style>
.highlight-red {
background-color: red;
}
.highlight-green {
background-color: green;
}
.highlight-yellow {
background-color: yellow;
}
</style>
<div class="col-lg-10">
<table id="Table" border="1" >
<tr class="highlight">
<td><input type="checkbox" name="cb1" id="cb1" value="y" onChange="changeSoma(this, 'red')" /></td>
<td>Click me</td>
</tr>
<tr>
<td><input type="checkbox" name="cb2" id="cb2" value="y" onChange="changeSoma(this, 'green')" /></td>
<td>Click me</td>
</tr>
<tr>
<td><input type="checkbox" name="cb3" id="cb3" value="y" onChange="changeSoma(this, 'yellow')" /></td>
<td>Click me</td>
</tr>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
function changeSoma(data, color){
if(data.checked && color == 'red'){
$(data).parent().parent().addClass("highlight-red");
}
else{
$(data).parent().parent().removeClass("highlight-red");
}
if(data.checked && color == 'green'){
$(data).parent().parent().addClass("highlight-green");
}
else{
$(data).parent().parent().removeClass("highlight-green");
}
if(data.checked && color == 'yellow'){
$(data).parent().parent().addClass("highlight-yellow");
}
else{
$(data).parent().parent().removeClass("highlight-yellow");
}
}
</script>
<script>
var cond = JSON.parse(localStorage.getItem("check"));
for(var i in cond) {
if(cond[i]) {
$("#"+i).attr("checked",true);
$("#"+i).parent().parent().addClass("highlight-"+cond[i]);
}
}
function changeSoma(data, color){
var state;
if(localStorage.getItem("check") == null) {
state = {cb1:0,cb2:0,cb3:0};
} else{
state = JSON.parse(localStorage.getItem("check"));
}
if(data.checked) {
$(data).parent().parent().addClass("highlight-"+color);
state[data.id]= color;
} else {
$(data).parent().parent().removeClass("highlight-"+color);
state[data.id]= 0;
}
localStorage.setItem("check",JSON.stringify(state));
}
</script>
</body>
</html>
しかし、私が水平になるように3のチェックボックスを必要としています。 trタグを削除すると、1つの色だけが3つすべてのチェックボックスを強調表示し、その他の2つの色は機能しません。以下に示されています。どのように私はこれを変更できますか？誰か私のバグはどこにあるのか教えてください。 
一つの ''
はい。 1つのテーブル行に多数のテーブルデータを持たせることができます。そうじゃない？ – Dushee
申し訳ありませんが、私はあなたがしようとしているものをかなり得ていません。あなたは同じ機能を望んでいて、すべてが一列になっているという意味ですか？ –
答えて
ちょうどあなたのtrタグにこれを追加します。それを削除する必要はありません。
は上記とほぼ同じこの
出典
2017-07-28 13:02:32
Mr.Jack Movこれは最もクールなオプションです。ありがとうsoooooooo多く – Dushee
良いコールは、それを考えたことがないでしょう。時には最も簡単な解決策は私がhahaと思う最高です –
Dushee、問題ありません。そして、@Weedozeはより短く、より良いjsコードを提供しました。 –
出典
2017-07-28 12:55:09 Weedoze
Mr.Weedozeありがとうございます。 – Dushee
のように見えますが、あなたは、単一にすべてのあなたの
<td>の要素をラップすることができ出典
2017-07-28 13:02:59
@Dusheeチェックボックスも同様に強調したい場合は、 'td'にカラークラスを追加してください –
Mr.Braedenありがとうございます。 Stackoverflowコミュニティは素晴らしいです。今日私は行くことができるたくさんのアプローチを学びました。 – Dushee
テキスト
tdではなく、チェックボックスをターゲットとすべき<tr>だから、それらはすべて一列に表示されます。また、<label>にテキストをラップして、<label>とそれに対応する<input>を識別して、親の<td>要素をスタイルすることもできます。HTML
JS（あなただけのブロックの場合）6 ``と
Live demo
出典
2017-07-28 13:07:46 Aer0
Mr.Aer0ありがとう、このオプションはうまくいきます – Dushee
関連する問題