javascript - 删除表中的特定列

Question

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

删除 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