删除表中的特定列

Question

我正在努力使用表格列隐藏和显示复选框。 我想删除“火星”列（粗体）和相应的数据（粗体）。

删除“火星”列后，金星及其尊重的数据值将在表格中居中。

在这里检查： http : //jsfiddle.net/bL44n3aj/3/

删除“火星”列后，我需要此输出： http : //jsfiddle.net/2Lcsc2go/

我的CSS和HTML部分：

 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

这是一种骇客的方式。 为了减少黑客行为，您需要向所有tds添加类。

我正在使用jQuery，您是否需要JavaScript版本？

 $(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

完整的解决方案：

 $(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;
    }

  })
})

检查此Fiddle链接： http : //jsfiddle.net/qLo60ux8/