Dushee Dushee - 1 year ago 46
CSS Question

Use 3 separate colors to highlight a table record when check box clicked

Following code is used to highlight a table record when a checkbox is clicked. When the first checkbox clicked table record highlighted in red color, and when second checkbox is clicked table record should highlighted in yellow color and when the third checkbox is clicked table record should be highlighted in green color.Although I have used 3 colors at style none of them highlight the record when I click them

<style>
.cb3 {background-color:yellow;}
.cb2 {background-color:green;}
.cb1 {background-color:red;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
Array.prototype.remove = function() {
var what, a = arguments, L = a.length, ax;
while (L && this.length) {
what = a[--L];
while ((ax = this.indexOf(what)) !== -1) {
this.splice(ax, 1);
}
}
return this;
};

var checked = [];

$(document).ready(function() {
if (localStorage.getItem("checked") == null)
localStorage.setItem("checked", checked);

$("#Table input").click(function() {
if ($(this).is(":checked")) {
$(this).parent().parent().addClass("highlight");
checked.push($(this).attr("id"));
} else {
$(this).parent().parent().removeClass("highlight");
checked.remove($(this).attr("id"));
}
localStorage.setItem("checked", JSON.stringify(checked));
});

var saved = JSON.parse(localStorage.getItem("checked"));
for (var i = 0;i < saved.length; i++) {
var itemAtIndex = $("#" + saved[i] + "");
itemAtIndex.click();
itemAtIndex.parent().parent().addClass("highlight");
}
});
</script>
<body>
<div class="col-lg-10">

<table id="Table" border="1"><tr>
<td><input type="checkbox" name="cb1" id="cb1" value="y" /></td>
<td>Click me</td>
</tr><tr>
<td><input type="checkbox" name="cb2" id="cb2" value="y" /></td>
<td>Click me</td>
</tr><tr>
<td><input type="checkbox" name="cb3" id="cb3" value="y" /></td>
<td>Click me</td>
</tr></

<table>
</div>

Answer Source

Your JS was correct. In your HTML, you just need to move each id to the <tr> row and add a class to each table record.

<tr id="cb1">
  <td><input type="checkbox" name="cb1" value="y" /></td>
  <td class=label>Click me</td>
</tr>

Then use this CSS:

#cb3.highlight .label {background-color:yellow;}
#cb2.highlight .label {background-color:green;}
#cb1.highlight .label {background-color:red;}

Demo: JSFiddle

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download