JSFiddle - React, Tailwind, and code Playground

by IllusionVK

HTML

<table>
    <img id="1" checked="checked"  src="http://jquery.bassistance.de/validate/demo/images/checked.gif"> Name </img> <br/>
    <img id="2" checked="checked"  src="http://jquery.bassistance.de/validate/demo/images/checked.gif"> Sex </img> <br/>
    <img id="3" src="http://jquery.bassistance.de/validate/demo/images/unchecked.gif"> Age</img> <br/>

</table>

<table id="table" border="1">
    
    <tr class="headercell">
        <td>Name</td>
        <td >Sex</td>
        <td >Age</td>
    </tr>
    <tr class="datacell">
        <td>Paula</td>
        <td>Female</td>
        <td>52</td>
    </tr>
    <tr class="datacell">
        <td>Simon</td>
        <td>Male</td>
        <td>29</td>
    </tr>
 </table>
     
<br/><br/>
Constraints: <br/>
- can't use form elements (inputs).  Have subsittuted checkboxes with img tag as figured this wopuld be ok.
- Cannot use Class's for tables  (as they are being used for CSS)
- Do not want to add any extra markup to tables.

<br/><br/>
Needs:<br/>
- Need to support IE 6.
- Needs to allow some columns to be hidden upon open. (eg 'Age' Column)

CSS

td, th {
    padding: 6px;
    border: 1px solid black;
}

.headercell {
    background-color: #f0eae2;
    font-weight: bold;
}

table {
    border: 1px solid black;
}

JavaScript

// =========================================================
// CODE WHEN USING CHECKBOXES 

//    $("input:checkbox:not(:checked)").each(function() {
//    var column = "table ." + $(this).attr("name");
//    $(column).hide();
//    });

//    $("input:checkbox").click(function(){
//    var column = "table ." + $(this).attr("name");
//    $(column).toggle();
//    });
//    });
                

// =========================================================
// CODE when NOT using Checkboxes.  Below example uses img tag.
 
// Need help on hide column on load code.  Commented out as to not affect working code.

//$("img:NOTcontains('checked')").each(function(){
// var column = $(this).attr('id');
// $('td:nth-child('+ column +')').hide();
//});
//then needs to toggle image

//thinking that the top line above needs to  read  like: if 'img' does not contains "Checked" or something like "ShowOnLoad"  then .hide column



// Works Well BUT does still need to toggle img from tick to cross
$('img').click(function(){
var column = $(this).attr('id');
    $('td:nth-child('+ column +')').toggle();
 });
  //then needs to toggle image