JSFiddle - React, Tailwind, and code Playground

by ds345

HTML

<table border 1>
<tr>
<td>Status</td>
<td>Priority</td>
<td>Date</td>
<td>Event</td>
<td>Updated</td>
</tr>
<tr>
<td contenteditable/><input type="checkbox" name="strike" value="" class="strike_button"></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>
<td contenteditable/><input type="checkbox" name="strike" value="" class="strike_button"></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>

CSS

table {
    border-collapse: collapse;
}

td {
    position: relative;
    padding: 5px 10px;
}

tr.strikeout td:before {
    content: " ";
    position: absolute;
    top: 50%;
    left: 0;
    border-bottom: 1px solid #111;
    width: 100%;
}

JavaScript

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