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

をしてみました。

<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';
elsedocument.getElementById('x').style.visibility='hidden';
}
function g()
{
var x=document.getElementById('y').style.display;
if(y!='none')
document.getElementById('y').style.display='none';
elsedocument.getElementById('y').style.display='block';
}
</script>

です。

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

No.1 ベストアンサー 回答者： BLUEPIXY 回答日時： 2006/03/30 22:30

＞if(y!='none')

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

この回答への補足

またまた失礼しました。
'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>

補足日時：2006/03/31 04:44

この回答へのお礼

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

<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';
elsex.style.visibility='hidden';
}
function g()
{
var x=document.getElementById('y');
if(x.style.display!='none')
x.style.display='none';
elsex.style.display='inline';
}
</script>

お礼日時：2006/03/30 22:32