删除表

Question

我正在努力使用表格列隐藏并使用复选框显示。我想删除Mars列（Bold）和各自的数据（Bold）。

删除Mars列后，Venus及其受尊重的数据值将在表格中居中。

点击此处：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

这是一种愚蠢的方式。为了减少hacky，你需要为所有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;
    }

  })
})

检查此小提琴链接：http://jsfiddle.net/qLo60ux8/