Updating table information formatting based on a checkbox value - php

Question

I have a table that contains a list of items taken from a SQL database using php. There is a checkbox, Done, that I want to tick off as the list is completed. I want the text of the associated item to update to grey or strikethrough as the box is ticked off.
I tried using one of the methods as above:
In CSS
:checked + span {
font-weight: bold;
}
In HTML
<table cellpadding="1" cellspacing="1" class="db-table">
<td><input type="checkbox" name="Done1" value="1" <?php if ($info['Done1'] ==1) echo 'checked'; ?>></td>
<span>
<td><?php echo $info['Seq1'];?></td>
<td><?php echo $info['Size1'];?></td>
</span>
</table>
It does not work. The table has further CSS formatting based on the class.
I take the same data, put it outside the table tags, and it works just fine.
Any suggestions of what to do here? Is the table class somehow overriding what I want to do?

Answer 1

Your markup is invalid, you can't nest a span directly within a table like that and you're also missing the <tr> tags.
However, even with valid markup, what you're asking isn't possible with CSS alone as it doesn't provide any means (yet) for selecting parent elements, which would need to be done here in order to target the sibling cells or parent row.
So, you're going to have to resort to a bit of JavaScript, toggling a class on the parent row each time a checkbox is clicked.
Before we get to the Snippet, here's what you'd need to do with your PHP in order to have the .done class applied to the table rows that require it initially:
<table cellpadding="1" cellspacing="1" class="db-table">
<tr<?php if ($info['Done1'] ==1) echo ' class="done"';?>>
<td>
<input<?php if ($info['Done1'] ==1) echo ' checked="checked"';?> type="checkbox" name="Done1" value="1">
</td>
<td><?php echo $info['Seq1'];?></td>
<td><?php echo $info['Size1'];?></td>
</tr>
</table>
And here's a working Snippet to demonstrate the solution:
var inputs=document.querySelector(".db-table").getElementsByTagName("input"),x=inputs.length;
while(x--)
inputs[x].addEventListener("click",function(){
this.parentNode.parentNode.classList.toggle("done");
},0);
.done td{
font-weight:bold;
}
/* Just some prettifying */table{border:1px solid #999;border-spacing:1px;font-family:arial;font-size:14px;margin:0 auto;width:50%;}td{line-height:20px;padding:5px;}td:first-child{text-align:center;width:20px;}tr:nth-child(odd) td{background:#eee;}tr:nth-child(even) td{background:#ddd;}
<table cellpadding="1" cellspacing="1" class="db-table">
<tr>
<td>
<input type="checkbox" name="Done1" value="1">
</td>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>
<input type="checkbox" name="Done2" value="1">
</td>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>
<input type="checkbox" name="Done3" value="1">
</td>
<td>text</td>
<td>text</td>
</tr>
</table>

Answer 2

Here is a working example. You're CSS will never show because your span is never inside of your checkbox (:check).
At this point you will start getting into DOM Elements. The following example uses JavaScript/jQuery. I set up a listener to listen for checkbox changes (ie is it checked or not). If the checkbox is checked then I add a "done" class onto .info classes.
In order to know which row I'm dealing with I've added to HTML tags. 1, I've added an id to the tr. This should always be unique to the row. 2, I've added a data-row to the checkbox element. This is used to identify the row.
JavaScript is great to use in this instance because you are wanting to change elements on the fly that are outside of the hierarchy that CSS allows.
It may be a little over the top, but it definitely gets the job done.
<?php
$info['Done1'] = 0;
$info['Seq1'] = 'Hello';
$info['Size1'] = 'World';
?>
<style type="text/css">
.done{color:#ccc;}
</style>
<table cellpadding="1" cellspacing="1" class="db-table">
<tr id="row1">
<td><input type="checkbox" name="Done1" value="1" data-row="1" <?php if ($info['Done1'] ==1) echo 'checked'; ?>></td>
<td class="info"><?php echo $info['Seq1'];?></td>
<td class="info"><?php echo $info['Size1'];?></td>
</tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('input[name="Done1"]').change(function(){
if( this.checked ){
$('#row'+$(this).data('row')+' .info').addClass('done');
}else{
$('#row'+$(this).data('row')+' .info').removeClass('done');
}
});
});
</script>