Remove the specific column in table

Question

I'm struggling with the table column hide and show using check box. I want to remove the Mars column(Bold) and with respective data(Bold).

After removing the Mars column, Venus and its respected data values to be centered in the table.

check here: http://jsfiddle.net/bL44n3aj/3/

After Removing Mars Column, I want this Output : http://jsfiddle.net/2Lcsc2go/

My CSS and HTML part:

 td{ border:1px solid #000; } th{ border:1px solid red; font-weight:normal !important; } tr.sub-header th{ text-align:center !important; border:1px solid blue !important; font-weight:bold !important; } tr.sub-header-value td{ text-align:center !important; font-weight:bold !important; } 

 <table width="80%"> <tr> <th>Produced</th> <th>Sold</th> <th>Produced</th> <th>Sold</th> </tr> <tr class="sub-header"> <th colspan="2">Mars</th> <th colspan="2" scope="colgroup">Venus</th> </tr> <tr> <td>50,000</td> <td>30,000</td> <td>100,000</td> <td>80,000</td> </tr> <tr class="sub-header-value"> <td colspan="2">Mars data</td> <td colspan="2"> Venus data </td> </tr> <tr> <td>10,000</td> <td>5,000</td> <td>12,000</td> <td>9,000</td> </tr> <tr class="sub-header-value"> <td colspan="2">Mars data</td> <td colspan="2">Venus data</td> </tr> </table> <input type="checkbox"> Remove Mars 

Answer 1

This is a hacky way. To make it less hacky, you would need to add classes to all of the tds.

I'm using jQuery, do you want a JavaScript version?

 $(function(){ var removed = false; $("#removeMars").click(function(){ if (!removed) { $.each($("#t tr"), function(){ var tds = $(this).find("th, td"); if (tds.length == 2) { $(tds[1]).attr("colspan", "4"); $(tds[0]).remove(); } }) removed = true; } }) }) 

 td{ border:1px solid #000; } th{ border:1px solid red; } tr.sub-header th{ text-align:center !important; border:1px solid blue !important; font-weight:bold !important; } tr.sub-header-value td{ text-align:center !important; font-weight:bold !important; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <table id="t" width="80%"> <tr> <th>Produced</th> <th>Sold</th> <th>Produced</th> <th>Sold</th> </tr> <tr class="sub-header"> <th colspan="2" >Mars</th> <th colspan="2" scope="colgroup">Venus</th> </tr> <tr> <td>50,000</td> <td>30,000</td> <td>100,000</td> <td>80,000</td> </tr> <tr class="sub-header-value"> <td colspan="2">Mars data</td> <td colspan="2"> Venus data </td> </tr> <tr> <td>10,000</td> <td>5,000</td> <td>12,000</td> <td>9,000</td> </tr> <tr class="sub-header-value"> <td colspan="2">Mars data</td> <td colspan="2">Venus data</td> </tr> </table> <input type="checkbox" id="removeMars"> Remove Mars 

Answer 2

The completed Solution:

 $(function(){
  var removed = false;
 $("#removeMars").change(function(){
        if(this.checked) {
    if (!removed) {
      $.each($("#t tr"), function(){
        var tds = $(this).find("th, td");

        if (tds.length == 2) {
          $(tds[1]).attr("colspan", "4");
          $(tds[0]).hide();

        }
      })
      removed = true;
    }
    }
    else{
         $.each($("#t tr"), function(){
        var tds = $(this).find("th, td");

        if (tds.length == 2) {
          $(tds[1]).attr("colspan", "2");
          $(tds[0]).show();

        }
      })    
      removed = false;
    }

  })
})

Check this Fiddle link : http://jsfiddle.net/qLo60ux8/