samedi 28 avril 2018

Changing font colors of rows and columns with checkboxes

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