CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Mark
Mark

Reputation: 15

Toggling colour on a table using check boxes in html

So I have a table like this

<table class="rest_tab" border="1">
<tbody><tr><th>Times</th><th></th><th></th></tr>
<tr><td <="" td=""></td><td align="right"><input type="checkbox" class="selectAll" id="Checkbox4" on=""></td><td align="right"><input  type="checkbox" class="selectAll" id="Checkbox5" on=""></td></tr>
<tr><td <="" td=""></td><td align="right"><input type="checkbox" class="selectAll" id="Checkbox7" on=""></td><td align="right"><input type="checkbox" class="selectAll" id="Checkbox8" on=""></td></tr>
<tr><td <="" td=""></td><td align="right"><input type="checkbox" class="selectAll" id="Checkbox10" on=""></td><td align="right"><input type="checkbox" class="selectAll" id="Checkbox11" on=""></td></tr>
</tbody></table>

Demo:

$(document).ready(function() {
  $('.pretty tr').toggle(function() {
    $(this).find(':checkbox').attr('checked', true);
    $(this).toggleClass('red');
  }, function() {
    $(this).toggleClass('red');
    $(this).find(':checkbox').attr('checked', false);
  });
});
table {
  font-family: 'Arial';
  margin: 25px auto;
  border-collapse: collapse;
  border: 1px solid #eee;
  border-bottom: 2px solid #00cccc;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1), 0px 10px 20px rgba(0, 0, 0, 0.05), 0px 20px 20px rgba(0, 0, 0, 0.05), 0px 30px 20px rgba(0, 0, 0, 0.05);
}

table td:hover {
  background: #C1FFC1;
}

table td:click {
  background: #fcc;
}

table td:hover {
  color: #000;
}

table th,
table td {
  color: #999;
  border: 1px solid #eee;
  padding: 12px 35px;
  border-collapse: collapse;
}

table th {
  background: #00cccc;
  color: #fff;
  text-transform: uppercase;
  font-size: 12px;
}

table th.last {
  border-right: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="rest_tab" border="1">
  <tbody>
    <tr>
      <th>Times</th>
      <th></th>
      <th></th>
    </tr>
    <tr>
      <td <="" td=""></td>
      <td align="right"><input type="checkbox" class="selectAll" id="Checkbox4" on=""></td>
      <td align="right"><input type="checkbox" class="selectAll" id="Checkbox5" on=""></td>
    </tr>
    <tr>
      <td <="" td=""></td>
      <td align="right"><input type="checkbox" class="selectAll" id="Checkbox7" on=""></td>
      <td align="right"><input type="checkbox" class="selectAll" id="Checkbox8" on=""></td>
    </tr>
    <tr>
      <td <="" td=""></td>
      <td align="right"><input type="checkbox" class="selectAll" id="Checkbox10" on=""></td>
      <td align="right"><input type="checkbox" class="selectAll" id="Checkbox11" on=""></td>
    </tr>
  </tbody>
</table>

I want to be able to, instead of just changing colour while hovering retain the colour while check box is checked for each box in the table.

I've tried for quite a while now and cannot get the js to do what I want, any help would be greatly appreciated.

Upvotes: 1

Views: 45

Answers (1)

Dhiraj
Dhiraj

Reputation: 33618

Have a css rule like this which will help you to toggle checkbox selection

.selected{
    background-color: #C1FFC1;
}

In your js you can do something like this 

$('.selectAll').change(function(){
  $(this).closest('td').toggleClass('selected');
});

Updated your jsfiddle demo

$(document).ready(function () {
     $('.selectAll').change(function(){
        $(this).closest('td').toggleClass('selected');
    });
});
table {
    font-family:'Arial';
    margin: 25px auto;
    border-collapse: collapse;
    border: 1px solid #eee;
    border-bottom: 2px solid #00cccc;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1), 0px 10px 20px rgba(0, 0, 0, 0.05), 0px 20px 20px rgba(0, 0, 0, 0.05), 0px 30px 20px rgba(0, 0, 0, 0.05);
}
table td:hover {
    background: #C1FFC1;
}
table td:click {
    background: #fcc;
}
table td:hover {
    color: #000;
}
table th, table td {
    color: #999;
    border: 1px solid #eee;
    padding: 12px 35px;
    border-collapse: collapse;
}
table th {
    background: #00cccc;
    color: #fff;
    text-transform: uppercase;
    font-size: 12px;
}
table th.last {
    border-right: none;
}
.selected{
    background-color: #C1FFC1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="rest_tab" border="1">
    <tbody>
        <tr>
            <th>Times</th>
            <th></th>
            <th></th>
        </tr>
        <tr>
            <td <="" td=""></td>
            <td align="right">
                <input type="checkbox" class="selectAll" id="Checkbox4" on="">
            </td>
            <td align="right">
                <input type="checkbox" class="selectAll" id="Checkbox5" on="">
            </td>
        </tr>
        <tr>
            <td <="" td=""></td>
            <td align="right">
                <input type="checkbox" class="selectAll" id="Checkbox7" on="">
            </td>
            <td align="right">
                <input type="checkbox" class="selectAll" id="Checkbox8" on="">
            </td>
        </tr>
        <tr>
            <td <="" td=""></td>
            <td align="right">
                <input type="checkbox" class="selectAll" id="Checkbox10" on="">
            </td>
            <td align="right">
                <input type="checkbox" class="selectAll" id="Checkbox11" on="">
            </td>
        </tr>
    </tbody>
</table>

Hope this helps

Upvotes: 1

Related Questions