Table Hide/Show Columns

by acjackson911

HTML

<br/>
<input type="checkbox" id="checkbox_data1" value="datagroup1" />Datagroup 1
<input type="checkbox" id="checkbox_data2" value="datagroup2" />Datagroup 2
<br/>
<br/>
    
<table class="resultTable" cellspacing="0" id="datatable">
    <thead>
        <tr>
            <th id='info' scope="col" colspan='2' class='infoClass'>
                Info
            </th>
            <th id='dataGroup1' colspan='3' class='tableColGroup1'>
                DataGroup 1
            </th>
            <th id='dataGroup1' colspan='4' class='tableColGroup2'>
                DataGroup 2
            </th>
        </tr>
        <tr>
            <th headers='info' scope="col">
                Line #
            </th>
            <th headers='info' scope="col">
                EmpID
            </th>
            <th>
                SID
            </th>
            <th>
                First&#160;Name
            </th>
            <th>
                Last&#160;Name
            </th>
            <th>
                Type
            </th>
            <th>
                App ID
            </th>
            <th>
                Batch ID
            </th>
            <th>
                Correlation&#160;ID
            </th>
        </tr>
    </thead>
    <tbody> 
        <tr>
            <td class='line'>
                1
            </td>
            <td class='empid'>
                123
            </td>
            <td class='sid'>
                456
            </td>
            <td>
                Barney
            </td>
            <td>
                Gumble
            </td>
            <td>
                P Adj
            </td>
            <td>
                1
            </td>
            <td>
                1
            </td>
            <td>
                1
            </td>
        </tr>
        <tr>
            <td class='line'>
                2
            </td>
            <td class='empid'>
                456
            </td>
            <td>
       ...

CSS

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

th {
    font-weight: bold;
}

table {
    border-collapse: collapse;
    width: 100%;
}

tbody tr:nth-child(odd) {
    background-color:#eaf1dd;
}

.hidden {
    display: none;
}

JavaScript

$('#checkbox_data1').change(function() {
    
    
    
    
    
    //var firstHeaderLineElement= $(".resultTable .tableColGroup1");
    
    //var colspan = parseInt(firstHeaderLineElement.attr("colspan"), 10);
    
    //var associateElements = $("tr:gt(0)")
   //     .find("th:gt(0):lt("+ colspan +"), td:gt(0):lt("+ colspan +")")
     //   .add(firstHeaderLineElement);
    //'checked' event code
   // if($(this).prop("checked")) {
        //associateElements .show();
     //   $(".
   // }
    //'unchecked' event code
    //associateElements .hide();
    
   //$( "p" ).addClass( "myClass yourClass" );
   
});



//$("#input").on("click", function(e)
//{
//    e.preventDefault();
    
$(document).ready(function(){
    $('#myTable').DataTable();
});