- 締切済み
画像を消す
前回、 http://oshiete1.goo.ne.jp/qa3493214.html で質問をして、とても良い、回答を頂きました、ありがとうございます。 これにプラスして質問があります。 一番上に来たら、上向きの矢印を消し、 一番下にきたら、下向きの矢印を消すというように、 ある一定の場所にくると、画像や文字を消すという事はできるのでしょうか? 上下移動と併用して指定するのは可能なのでしょうか?? javascriptを本当に始めたばかりで、全く応用ができません。。 おわかりになる方どうか教えてください! よろしくお願いします。
- みんなの回答 (1)
- 専門家の回答
みんなの回答
- OKbokuzyo
- ベストアンサー率43% (130/296)
#3さんの回答を利用させてもらいました。 <html> <body> <script> function shift_tr(obj,flg){ var tr=obj.parentNode.parentNode; var tbody=tr.parentNode; var trs=tbody.getElementsByTagName("tr"); for(var i=0;i<trs.length;i++){ if(flg==1 && trs[i]==tr && i<trs.length -1){ tbody.insertBefore(trs[i+1],trs[i]); //ここから追記 if(i == trs.length-2){ trs[i+1].lastChild.lastChild.style.display = "none" trs[i].lastChild.lastChild.style.display = "inline" }else if(i == 0){ trs[i].lastChild.firstChild.style.display = "none" trs[i+1].lastChild.firstChild.style.display = "inline" } //ここまで追記 break; } if(flg==-1 && trs[i]==tr && i>0){ tbody.insertBefore(trs[i],trs[i-1]); //ここから追記 if(i == 1){ trs[i-1].lastChild.firstChild.style.display = "none" trs[i].lastChild.firstChild.style.display = "inline" }else if(i == trs.length-1){ trs[i].lastChild.lastChild.style.display = "none" trs[i-1].lastChild.lastChild.style.display = "inline" } //ここまで追記 break; } } } </script> <table border> <tbody> <tr><td>1</td><td>test</td><td><span onClick="shift_tr(this,-1)">▲</span><span onClick="shift_tr(this,1)">▼</span></td></tr> <tr><td>2</td><td>test</td><td><span onClick="shift_tr(this,-1)">▲</span><span onClick="shift_tr(this,1)">▼</span></td></tr> <tr><td>3</td><td>test</td><td><span onClick="shift_tr(this,-1)">▲</span><span onClick="shift_tr(this,1)">▼</span></td></tr> <tr><td>4</td><td>test</td><td><span onClick="shift_tr(this,-1)">▲</span><span onClick="shift_tr(this,1)">▼</span></td></tr> <tr><td>5</td><td>test</td><td><span onClick="shift_tr(this,-1)">▲</span><span onClick="shift_tr(this,1)">▼</span></td></tr> </tbody> </table> <!-- ここから追記 --> <!-- 本来はonloadイベントハンドラにおくべきかも --> <script> var trNodes = document.getElementsByTagName("tr"); trNodes[0].lastChild.firstChild.style.display = "none"; trNodes[trNodes.length - 1].lastChild.lastChild.style.display = "none"; </script> <!-- ここまで追記 --> </body> </html> まぁ、他人のソースをわざわざ改変しなくとも、 onclickイベントハンドラに追加してもいいですね。
お礼
OKbokuzyoさん 本当にありがとうございます。 色々サイトをめぐり、頂いた参考サイトやソースでやってみても、 どうしても頭の回路がつながらなくて、余計わからなくなっていました。 いただいたソースを噛み砕いて、勉強します。 本当にありがとうございました。