Hide complete column if data is null or empty using jquery -
i hide complete column including heading if data empty or null. tried jquery, iam not able accomplish iam trying. iam getting records in php. columns doesnt have data, dont need show empty data or data null. can guide me on whats mistake iam making.
<html> <head> <title>hide</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.js"></script> </head> <body> <table border="1" width="100%" id="mytable"> <thead> <tr> <th>head1</th> <th>head2</th> <th>head3</th> </thead> </tr> <tr> <td>aa</td> <td></td> <td>cc</td> </tr> <tr> <td>aa</td> <td></td> <td>cc</td> </tr> <tr> <td>aa</td> <td></td> <td>cc</td> </tr> </table> </body> </html> <script type='text/javascript'> $(window).load(function(){ $('#mytable > tbody > tr td:empty').parent().hide() if($td.text() == ''){ $(this).hide(); } }); }); </script>
your selector finds empty cell in table, , hides entire row contains it, since parent of td
tr
. need loop through columns, , test whether cells in column empty. hide cells in column.
$(document).ready(function() { var columns = $("#mytable > tbody > tr:first > td").length; (var = 0; < columns; i++) { if ($("#mytable > tbody > tr > td:nth-child(" + + ")").filter(function() { return $(this).text() != ''; }).length == 0) { $("#mytable > tbody > tr > td:nth-child(" + + "), #mytable > thead > tr > th:nth-child(" + + ")").hide(); } } });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <table border="1" width="100%" id="mytable"> <thead> <tr> <th>head1</th> <th>head2</th> <th>head3</th> </tr> </thead> <tr> <td>aa</td> <td></td> <td>cc</td> </tr> <tr> <td>aa</td> <td></td> <td>cc</td> </tr> <tr> <td>aa</td> <td></td> <td>cc</td> </tr> </table>
Comments
Post a Comment