On Jan 23, 6:55 pm, "marss" <m...@ukr.net> wrote:
> Dautkha...@gmail.com wrote:
> > And tried to change visibility of a DIV, but this doesn't work.
> > How can I change visibility of set of TRs?Hi,
> It is simple if you know which rows you want to hide/show.
> Here is the example:
>
> <html>
> <head>
> <script>
> function changeVisibility(show)
> {
> var rows = document.getElementById("tbl").rows;
> for(var i=0;i<rows.length;i++)
> if (i==1 || i==2 || i==3)
> rows[i].style.display = show ? "" : "none";}</script>
Consider the simplicity of a toggle:
function toggleDisplay(el) {
if (typeof el == 'string') el = document.getElementById(el);
el.style.display = ('none' == el.style.display)? '' : 'none';
}
> </head>
> <body>
> <table id="tbl">
> <tr><td>0</td></tr>
> <tr><td>1</td></tr>
> <tr><td>2</td></tr>
> <tr><td>3</td></tr>
> <tr><td>4</td></tr>
> </table>
> <input type="button" onclick="changeVisibility(true)" value="Show
> Rows">
> <input type="button" onclick="changeVisibility(false)" value="Hide
> Rows">
That would be much simpler if the rows to hide/show were enclosed in
their own tbody element:
<table id="tbl">
<tr><th>0
<tbody id="tb01">
<tr><td>1<tr><td>2<tr><td>3<tr><td>4
</tbody>
</table>
<input type="button" onclick="toggleDisplay('tb01');"
value="Hide/show rows">
To prevent the "yo-yo" effect it may be better to toggle the visibility
instead.
--
Rob
Similar Threads
