I am looking for a way to change the font colors of the row and column contents of a table with the assigned checkbox at the top and on the left side of the table. so when a checkbox is clicked either a corresponding row or column contents change font color. I don't need multiple colors. I just need to change font color to an assigned color only. Multiple row checkbox and column checkboxes may be clicked together, this shouldn't cause a complication. Thank you for your help!
<style type="text/css">
.tb {
font-size: 12px;
border: 1px solid #CCC;
font-family: Arial, Helvetica, sans-serif;
}
.tb td {
padding: 4px;
margin: 3px;
border: 1px solid #CCC;
}
</style>
<table class="tb">
<tbody>
<tr>
<td></td>
<td>
<label class="color-switch">
<input type="checkbox" id="check" /> Switch</label>
</td>
<td>
<label class="color-switch">
<input type="checkbox" id="check" /> Switch</label>
</td>
<td>
<label class="color-switch">
<input type="checkbox" id="check" /> Switch</label>
</td>
<td>
<label class="color-switch">
<input type="checkbox" id="check" /> Switch</label>
</td>
<td>
<label class="color-switch">
<input type="checkbox" id="check" /> Switch</label>
</td>
<td>
<label class="color-switch">
<input type="checkbox" id="check" /> Switch</label>
</td>
<td>
<label class="color-switch">
<input type="checkbox" id="check" /> Switch</label>
</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox" id="check" /> Switch</label>
</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox" id="check" /> Switch</label>
</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox" id="check" /> Switch</label>
</td>
<td>Number</td>
<td>Number</td>
<td>Text</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox" id="check" /> Switch</label>
</td>
<td>Number</td>
<td>Number</td>
<td>Text</td>
<td>Text</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox" id="check" /> Switch</label>
</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox" id="check" /> Switch</label>
</td>
<td>Text</td>
<td>Number</td>
<td>Number</td>
<td>Text</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox" id="check" /> Switch</label>
</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox" id="check" /> Switch</label>
</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox" id="check" /> Switch</label>
</td>
<td>Text</td>
<td>Number</td>
<td>Text</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox" id="check" /> Switch</label>
</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox" id="check" /> Switch</label>
</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox" id="check" /> Switch</label>
</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox" id="check" /> Switch</label>
</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox" id="check" /> Switch</label>
</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox" id="check" /> Switch</label>
</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
</tr>
</tbody>
</table>
Aucun commentaire:
Enregistrer un commentaire