Forum Moderators: open

Message Too Old, No Replies

hiding and showing table rows

         

natty

8:44 am on Oct 25, 2005 (gmt 0)

10+ Year Member



hi all,

have a little problem with a table.
the table has (not too suprisingly) afew rows. here is some markup.

<tr class="mainline" id="line5040">
<td><a href="javascript:showLines(5040,0)">5040</a></td>
<td>Back Translation</td>
<td>a</td>
<td>fre</td>
<td>27-Jul-2005</td>
<td><div class="minus2">-2</div></td>
<td><div class="minus2">-1.4</div></td>
<td><div class="minus2">-1</div></td>
<td><div class="minus2">-2</div></td>
<td><div class="minus1">-0.6</div></td>
<td><a href="javascript:popWin(5040)">6</a></td>
</tr>
<tr id="line50400" class="subline">
<td>5040</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>JBP </td>
<td><div class="minus1">-0.33</div></td>
<td><div class="minus1">-0.5</div></td>
<td><div class="minus1">-0.67</div></td>
<td><div class="minus1">-0.33</div></td>
<td><div class="minus1">-0.67</div></td>
<td>6</td></tr>

now, there are two lines there, a 'mainline' and a 'subline' (the table is made up of many line, and there can be 2,3,4 sublines that go with a mainline). on the page rendering, the subline is set to display:none;, the plan being that when you click the showines() function, all the sublines relating to the mainline are shown.

however.

the javascript i have for this isnt quite hitting home.


function showLines(Id,linesToHide){
for (var i=0;i==linesToHide;i++){
x=document.getElementById("line" + Id + i);
x.style.display = "block";
}
}

the sublines do show, but the whole row shows in the first table cell.
no cigar for me.
i have tried using inline, instead of block, but it has basically the same effect.

any ideas?
help would be greatly appreciated.

many thanks

nat

kaled

9:07 am on Oct 25, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I find that to restore a style to its default value (ie the value used without any js intervantion) it is simplest to use
style.display="";

I haven't tried this with table components but it should work. Of course, you should test for browser compatibility. I think there may also be a display value of something like "tablerow" - I vaguely recall seeing something like this once.

However, in this case, I don't think that is appropriate. Instead of using the display property try using the visibility property.

Kaled.

natty

9:15 am on Oct 25, 2005 (gmt 0)

10+ Year Member



hi kaled,

thanks for the reply.
no luck with tablerow, and also, i thought when you used visibility, apart from different browsers using slightly different values for this, that the page doesnt then take up the space where the 'visible' item was, in fact this is true..
i just tried it, and the table row stays but the data in it hides..

not quite what i was after. :(

natty

10:51 am on Oct 25, 2005 (gmt 0)

10+ Year Member



ok chaps(esses),

it turned out that in IE it was working with the display:block thing..
i cant believe im saying that ..!
and it was just FF that wasnt playing ball.
so unfortunately - going against all my accessible/proper markup type feelings i ended up doing a browser sniff and chaging the display type to 'table-row' for FF and leaving it as 'block' for IE.

cheers
nat

cephus

5:59 pm on Nov 14, 2005 (gmt 0)

10+ Year Member



Kaled had it right. If you use <b>style.display="";</b> it will work in IE and FF (instead of using "block")