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>
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>
Comments
Post a Comment