右の一覧表から必要なものをクリックすると、左の選択一覧用の表に選択されるようにするためには？

質問

ＪａｖａＳｃｒｉｐｔの勉強中なのですが、どこかのページにて見かけたことのある、以下のような仕掛けを組もうと四苦八苦しております。
どの様にすればよいか皆目見当がつかず、ヒントをいただければと思います。

左右二つに表を作成(問題がなければ<table>コマンドの予定)し、
左側を選択された項目、右側を一覧用の表とする。
右側の一覧表のうちのひとつをクリックすることでその表示が消え、左側の表にクリックされたものが表示される。
左側に選択表示されたものをクリックすることで、左側に選択表示されたものが消えて、元の右の一覧に表示される。

このような仕掛けはJavaScript特有のものだと思うのですが、もしもその方法についてお心当たりのある方はヒントをいただければと思います。

どうぞ、よろしくお願いいたします。

回答No.3

yambejp · ベストアンサー

順番は変えたくなかったのですね。
では、同じ構造のテーブルを用意しておいて、隠したり見せたりするのがよいかと。

ざっと書いてみました。

<script>
window.onload=function(){
var tags=document.getElementsByTagName("TR");
for(var i=0;i<tags.length;i++){
var id=tags[i].parentNode.parentNode.id;
if(id=="migi" || id=="hidari") tags[i].onclick=removeTR;
if(tags[i].parentNode.nodeName=="TBODY" &&id=="hidari") tags[i].style.display="none";
}
}
function removeTR(){
var id=this.parentNode.parentNode.id=="hidari"?"migi":"hidari";
this.style.display="none";
var tags=this.parentNode.getElementsByTagName("*");
for(var i=0;i<tags.length;i++){
if(tags[i]==this) break;
}
var tags=document.getElementById(id).getElementsByTagName("TBODY")[0].getElementsByTagName("*");
tags[i].style.display="";
}
</script>
<table id="hidari" style="float:left; margin-right:20px;" border>
<thead>
<tr><th>左の表</th></tr>
</thead>
<tbody>
<tr><td>test1</td></tr>
<tr><td>test2</td></tr>
<tr><td>test3</td></tr>
<tr><td>test4</td></tr>
<tr><td>test5</td></tr>
</tbody>
</table>

<table id="migi" border>
<thead>
<tr><th>右の表</th></tr>
</thead>
<tbody>
<tr><td>test1</td></tr>
<tr><td>test2</td></tr>
<tr><td>test3</td></tr>
<tr><td>test4</td></tr>
<tr><td>test5</td></tr>
</tbody>
</table>

お礼

とても丁寧にご回答いただきありがとうございます。
私の思った通りの挙動です。
このスクリプトの意味を一行ずつ調べて、スクリプト構築の考え方を勉強して行こうと思います。

回答No.2

auty

＞＞＞　左右二つに表を作成

表は、一つにする方法も可能です。

一覧表は、別々のセルにせず<select>タグを使ったほうが、
後の処理が簡単になるかも知れません。

<select name="sele" onchange="setKomoku(this.value)" multiple="multiple">
<option value="0">sentaku0</option>
<option value="1">sentaku1</option>
<option value="2">sentaku2</option>
<option value="3">sentaku3</option>
</select>

こうすると、関数setKomoku(i)の中で準備しておいた配列から
簡単に選ばれた項目を取り出せます。それを
　　　 document.getElementById("左").innerHTML = 配列[i];
とすればよいわけです。もちろん上の<select>タグの場合も
　　　　document.getElementById()
は使えます。

配列は、ご存知かと思いますが、
　　　var arr = ["","","","","",""];
で初期設定できます。

項目と一覧表の表示・非表示は、項目側のonClick()イベントでCSSを利用した方法に挑戦してみてください。
　　　.hide { visibility: hidden; }
　　　.visi { visibility: visible; }

<td id="hide_id" class="visi">
の準備をしておきます。

document.getElementById(hide_id).className = hide;
document.getElementById(hide_id).className = visi;

で、表示・非表示の切り替えを設定する。

お礼

とても速い返答をありがとうございます。

実は、将来的には右側のリストを普段は隠しておくことを考えていたため、このような質問になりました。
最初から書いておけばよかったですね（＾＾；

CSSは使用したことがなかったので、こちらについても勉強してみようと思います（HTMLのみならあったんですがofz）。
左の方では<td>の、右の方では<option>の、それぞれのidを同じにしておいて、No.1の方が移動手法に用いていたif構文を使って重複判定をするか、または左右全く同じものを準備しておいて、片方がhideならもう片方はvisiにするとすればよさそうかな…と思いました。

まずは、このような戦略で組んでいこうと思います。

何か気になる点など御座いましたら、お手数ですがご指摘いただけると嬉しいです。

回答No.1

yambejp

こんなんでどうでしょう？

<script>
window.onload=function(){
var tags=document.getElementsByTagName("TR");
for(var i=0;i<tags.length;i++){
var id=tags[i].parentNode.parentNode.id;
if(id=="migi" || id=="hidari") tags[i].onclick=removeTR;
}
}
function removeTR(){
var id=this.parentNode.parentNode.id=="hidari"?"migi":"hidari";
this.parentNode.removeChild(this);
document.getElementById(id).getElementsByTagName("TBODY")[0].appendChild(this);
}
</script>

<table id="hidari" style="float:left; margin-right:20px;" border>
<thead>
<tr><th>左の表</th></tr>
</thead>
<tbody>
</tbody>
</table>

<table id="migi" border>
<thead>
<tr><th>右の表</th></tr>
</thead>
<tbody>
<tr><td>test1</td></tr>
<tr><td>test2</td></tr>
<tr><td>test3</td></tr>
<tr><td>test4</td></tr>
<tr><td>test5</td></tr>
</tbody>
</table>

お礼

非常に速いご返答、ありがとうございます。

こういう設定方法もあるのですね・・・。
もの凄く意表を突かれたとともに、スクリプトの短さにびっくりしました。
この方法もとても良いのですが、選択を繰り返すうちに順番がどんどん変化していってしまうので、
選択リスト数がとても多くなってしまった時に困ってしまいそうなので、
少量のリストの時には、このElementsByTagName("TR")の手法を利用させていただきたいと思います。