删除单元格如果它的列没有标题部分

Question

是否有一种简单的方法可以检查单元格列在表格中是否有thead？我想.remove('td')，如果它不在thead的列中。

视觉：

陈述显而易见但又重复说明，因为最后一个单元格上面没有标题我希望它从DOM中删除

table {border: 1px solid;}
td, th {
  border: 1px solid;
  width: 75px;
}
th {height: 40px;}
td {height: 75px;}

<table>
  <thead>
    <tr>
      <th colspan="2">Header</th>
      <th colspan="2">Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>   <!-- SHOULD BE REMOVED -->
    </tr>
  </tbody>
</table>

jsFiddle： https://jsfiddle.net/CSS_Apprentice/7dvt9tam/

Answer 1

计算总colspan值（=允许的最大单元格/行）
比使用:gt() selector，摆脱所有超过TD元素

＆＃13;

＆＃13;

$("table").each(function(){
  var maxCell = 0;
  $(this).find("th").prop("colspan", function(i,v){
    maxCell += v;
  });
  $(this).find("td:gt("+(maxCell-1)+")").remove();
});

＆＃13;

table {border: 1px solid;}
td, th {
    border: 1px solid;
    width: 75px;
}
th {height: 40px;}
td {height: 75px;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th colspan="2">Header</th>
      <th colspan="2">Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

即使您没有定义colspan attr：

，上述工作仍然有效

  <th>Header</th>
  <th colspan="2">Header</th>

<强> jsBin example