0

I currently utilized this method Linethrough/strikethrough a whole HTML table row and it works great.

However how do I attach it to a HTML check box onclick method?

http://jsfiddle.net/deaconf19/DrEhv/

<table border 1>
<tr>
<td>Status</td>
<td>Priority</td>
<td>Date</td>
<td>Event</td>
<td>Updated</td>
</tr>
<tr>
<td contenteditable/>Checkbox</td>
<td contenteditable/>3</td>
<td contenteditable/>02/07/2014</td>
<td contenteditable/>code needs updating again</td>
<td contenteditable/>02/07/2014</td>
</tr>
<tr class="strikeout">
<td contenteditable/>Checkbox</td>
<td contenteditable/>1</td>
<td contenteditable/>02/07/2014</td>
<td contenteditable/>code needs updating</td>
<td contenteditable/>02/07/2014</td>
</tr>
</table>
Community
  • 1
  • 1
JA1
  • 538
  • 2
  • 7
  • 21

3 Answers3

2

You can use jQuery, to find check box parents parent and add a class to it when status of checkbox changed

if ( this.checked) {
  $(this).parent().parent().addClass("strikeout");
} else {
 $(this).parent().parent().removeClass("strikeout");
}

Example

Simonas B.
  • 191
  • 6
1

Just use javascript to change the table class. If using jQuery:

$('#myCheckbox').change(function(){
    $('#myTableRow').toggleClass('strikeout', $(this).prop('checked'));
})

The text below assumes that you have a checkbox with id="myCheckbox" and a table row with id="myTableRow".

nicbou
  • 1,047
  • 11
  • 16
1

Why use jQuery if pure JS can do the same thing:

In your HTML, add onclick handler for checkboxes:

<input type="checkbox" onclick="strike(this)">

Then change class of TR element based on checkbox value, like this:

function strike(elm) {
    if(elm.checked) {
        elm.parentNode.parentNode.className = "strikeout";
    } else {
        elm.parentNode.parentNode.className = "";
    }
}

As simple as that !

Jayesh Chandrapal
  • 668
  • 7
  • 11
  • 1
    Little addendum: if your element has multiple classes (e.g. `class='strikethrough active'`), it will strip that other class too. It's not a huge problem, given the relative complexity of toggling a class in pure javascript. If you use jQuery, there are much more elegant ways to do it, but such a simple problem isn't worth including jQuery. – nicbou Apr 07 '14 at 17:09