要素の表示/非表示の実験

質問

をしてみました。

<input type="button" onclick="f()" value="push"/>
<input type="button" onclick="g()" value="push"/>
<table>
<tr><td>a</td><td>b</td><td>c</td></tr>
<tr id="x"><td>x</td><td>y</td><td>z</td></tr>
<tr><td>u</td><td>v</td><td>w</td></tr>
<tr id="y"><td>x</td><td>y</td><td>z</td></tr>
<tr><td>a</td><td>b</td><td>c</td></tr>
</table>

<script>
function f()
{
var x=document.getElementById('x').style.visibility;
if(x=='hidden')
document.getElementById('x').style.visibility='visible';
else document.getElementById('x').style.visibility='hidden';
}
function g()
{
var x=document.getElementById('y').style.display;
if(y!='none')
document.getElementById('y').style.display='none';
else document.getElementById('y').style.display='block';
}
</script>

です。

最初のボタンは単に表示するかどうかだけで位置は消えた場所に詰められません。
次のボタンは消えるとその場所に他の要素が詰められます。しかし消えたものは次にボタンを押しても消えたままです。
消えた場所に要素が詰められしかも再表示できるようにするにはどうしたらいいのでしょうか?

回答No.1

BLUEPIXY · ベストアンサー

＞if(y!='none')
が
if(x!='none')
の間違いだと思う。
あと、
else document.getElementById('y').style.display='block';
より
else document.getElementById('y').style.display='';
の方が良いと思う。

お礼

失礼しました。
以下でできました。

<input type="button" onclick="f()" value="push"/>
<input type="button" onclick="g()" value="push"/>
<table>
<tr><td>a</td><td>b</td><td>c</td></tr>
<tr id="x"><td>x</td><td>y</td><td>z</td></tr>
<tr><td>u</td><td>v</td><td>w</td></tr>
<tr id="y"><td>x</td><td>y</td><td>z</td></tr>
<tr><td>a</td><td>b</td><td>c</td></tr>
</table>
<script>
function f()
{
var x=document.getElementById('x');
if(x.style.visibility=='hidden')
x.style.visibility='visible';
else x.style.visibility='hidden';
}
function g()
{
var x=document.getElementById('y');
if(x.style.display!='none')
x.style.display='none';
else x.style.display='inline';
}
</script>

補足

またまた失礼しました。
'inline'->''ですね。

<input type="button" onclick="f()" value="push"/>
<input type="button" onclick="g()" value="push"/>
<table>
<tr><td>a</td><td>b</td><td>c</td></tr>
<tr id="x"><td>x</td><td>y</td><td>z</td></tr>
<tr><td>u</td><td>v</td><td>w</td></tr>
<tr id="y"><td>x</td><td>y</td><td>z</td></tr>
<tr><td>a</td><td>b</td><td>c</td></tr>
</table>
<script>
function f()
{
var x=document.getElementById('x');
if(x.style.visibility=='hidden')
x.style.visibility='visible';
else x.style.visibility='hidden';
}
function g()
{
var x=document.getElementById('y');
if(x.style.display!='none')
x.style.display='none';
else x.style.display='';
}
</script>