jquery - Remove A Cell If It's Column Doesn't Have A Header Section -


is there easy way check if cell's column has thead above in table? want .remove('td') if it's not in column thead.

visual:

stating obvious reiterate illustration, since last cell doesn't have header above want deleted 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 removed -->      </tr>    </tbody>  </table>

jsfiddle: https://jsfiddle.net/css_apprentice/7dvt9tam/

calculate total colspan values (= max cells allowed / row)
using :gt() selector, rid of exceeding td elements

$("table").each(function(){    var maxcell = 0;    $(this).find("th").prop("colspan", function(i,v){      maxcell += v;    });    $(this).find("td:gt("+(maxcell-1)+")").remove();  });
table {border: 1px solid;}  td, th {      border: 1px solid;      width: 75px;  }  th {height: 40px;}  td {height: 75px;}
<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>

the above works if don't define colspan attr:

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

jsbin example


Comments

Popular posts from this blog

Why does Go error when trying to marshal this JSON? -

Django REST Framework perform_create: You cannot call `.save()` after accessing `serializer.data` -

apache - Restler setup not working -