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');     }); }); 

js fiddle demo.


Comments

Popular posts from this blog

c++ - CryptStringToBinary API behavior -

c++ - Correct method for redrawing a layered window -

java.util.scanner - How to read and add only numbers to array from a text file -