jquery - hiding part of table using javascript without changing the table layout -
edit: okay put in script tag in
$(document).ready(function) { so eventd's hide.
i have table , code below
<table> <tr> <td>itemone</td> <td class="eventd">itemtwo</td> </tr> </table> now, want @ beggining, first td td visible (anything in eventd should not visible). after that, want when click first td (itemone) itemtwo slides , appears. far have
$(document).ready(function() { $('.eventd').hide(); }); and hiding eventd's, however, td's don't have eventd class taking entire screen. how make layout doesn't change?
if entirety of code, , appears before relevant elements (whether in head or body elements, problem script run before dom nodes exist.
therefore, can either place in $(document).ready():
<script> $(document).ready(function(){ $('.eventd').hide(); }); </script> or place script after elements, in html, upon want act.
<body> <table> <tr> <td>itemone</td> <td class="eventd">itemtwo</td> </tr> </table> <script> $('.eventd').hide(); </script> </body> do bear in mind, though, adding , removing individual table cells cause layout problems, it's better hide descendant elements of relevant td, rather td itself.
for example, given current html:
<table> <tr> <td>itemone</td> <td class="eventd"><div>itemtwo</div></td> </tr> </table> and:
$(document).ready(function(){ $('.eventd').hide(); }); this gives: demo, causing single visible td take whole row-space.
using above html following jquery:
$(document).ready(function(){ $('.eventd div').hide(); }); this gives: demo, still demonstrates layout-changes (because there's no visual content show inside of td), td remains visible (so it's marginally-smaller change).
the following jquery makes content of td 'hidden' (so it's not visible on page, still 'there' taking space in document's flow):
$(document).ready(function(){ $('.eventd div').css('visibility','hidden'); }); this gives: demo.
i would, however, prefer, if visibility restored @ point, add, or remove, class on td itself, , use css address specifics of each state:
$(document).ready(function(){ $('.eventd').addclass('hidden'); $('tr').on('click', 'td.eventd', function(){ $(this).toggleclass('hidden'); }); });
Comments
Post a Comment