html - IE7 with rowspan when dynamically collapsing multiple rows (extra space at bottom) -
i'm trying dynamically hide/unhide multiple table rows using javascript mimic collapse/expand. here relevant code snippets:
function selectionfilter(check, filter){ var elem = document.getelementbyid('myscrolltable').rows; for(i = 0; < elem.length; i++){ var type = elem[i].getattribute('type'); if(type== filter){ if(check == true){ elem[i].style.display=''; }else{ elem[i].style.display='none'; } } } }
and here sample html:
<input type="checkbox" checked="true" value="t1" onclick="selectionfilter(this.checked, this.value);">some type 1</input > <input type="checkbox" value="t2" onclick="selectionfilter(this.checked, this.value);">some type 2</input ><br><br> <table cellspacing="1" cellpadding="2" class="" id="myscrolltable"> <thead> <tr> <th>data1</th> <th>data2</th> </tr> </thead> <tbody> <tr type="t1"> <td rowspan="50"><a href="something1">something1</a></td><td><a href="something2">something2</a></td> </tr> <tr type="t1"> <td><a href="something2">something2</a></td> </tr> . . <tr type="t2" style="display:none;"> <td rowspan="50"><a href="something1">something1</a></td><td><a href="something2">something2</a></td> </tr> <tr type="t2" style="display:none;"> <td><a href="something2">something2</a></td> </tr> . . </tbody> </table>
in firefox fine. in ie, after first time row hidden, when unhidden has space appending @ bottom. not happen when rowspan not used. tried many things couldn't rid of space.
i appreciate if give me hint.
did try using block instead of empty string?
you should try using
elem[i].style.display = 'block';
and if fails should try
elem[i].style.display = 'table-row';
and allways should check w3schools documentation, usefull http://www.w3schools.com/css/pr_class_display.asp
tellme if works you
Comments
Post a Comment