php - Updating table information formatting based on a checkbox value -

i have table contains list of items taken sql database using php. there checkbox, done, want tick off list completed. want text of associated item update grey or strikethrough box ticked off.

i tried using 1 of methods 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 not work. table has further css formatting based on class. take same data, put outside table tags, , works fine. suggestions of here? table class somehow overriding want do?

your markup invalid, can't nest span directly within table , you're missing <tr> tags.

however, valid markup, you're asking isn't possible css alone doesn't provide means (yet) selecting parent elements, need done here in order target sibling cells or parent row.

so, you're going have resort bit of javascript, toggling class on parent row each time checkbox clicked.

before snippet, here's you'd need php in order have .done class applied table rows require 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 working snippet demonstrate 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;  }    /* 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>