JavaScriptの勉強中なのですが、どこかのページにて見かけたことのある、以下のような仕掛けを組もうと四苦八苦しております。
どの様にすればよいか皆目見当がつかず、ヒントをいただければと思います。
左右二つに表を作成(問題がなければ<table>コマンドの予定)し、
左側を選択された項目、右側を一覧用の表とする。
右側の一覧表のうちのひとつをクリックすることでその表示が消え、左側の表にクリックされたものが表示される。
左側に選択表示されたものをクリックすることで、左側に選択表示されたものが消えて、元の右の一覧に表示される。
このような仕掛けはJavaScript特有のものだと思うのですが、もしもその方法についてお心当たりのある方はヒントをいただければと思います。
どうぞ、よろしくお願いいたします。
No.3ベストアンサー
- 回答日時:
順番は変えたくなかったのですね。
では、同じ構造のテーブルを用意しておいて、隠したり見せたりするのがよいかと。
ざっと書いてみました。
<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
- 回答日時:
>>> 左右二つに表を作成
表は、一つにする方法も可能です。
一覧表は、別々のセルにせず<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
- 回答日時:
こんなんでどうでしょう?
<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")の手法を利用させていただきたいと思います。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- MySQL MySQL,JavaScript,PHPコードの結果を表示する方法を教えてください。 1 2023/02/13 17:49
- LINE LINE機能の"削除"について、した側とされた側に起こることを教えてください LINEのトーク一覧か 2 2023/04/13 08:24
- Outlook(アウトルック) infoseekメールの受信トレイでメール一覧が表示されない 1 2023/04/05 11:12
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
- Excel(エクセル) マクロでボタンにつける名前がどこに設定されているかわからないケースがありました。 1 2023/06/19 19:37
- Chrome(クローム) Chromeでgooglemap検索等結果が他国になってしまう 1 2022/10/05 12:18
- その他(Microsoft Office) Microsoft Edgeの「関心のあるカテゴリ」を表示させるには。 1 2023/03/16 18:05
- HTML・CSS HTMLのフォームについてお尋ねします 1 2022/12/03 21:47
- Excel(エクセル) 余計なお世話的な「入力規則」?対策は? 2 2023/01/14 12:39
- Excel(エクセル) Excelのセル上の日付の不具合 3 2022/05/22 18:20
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
特定<table>内の<td>の色を変える
-
JavaScriptで特定のtdタグにcla...
-
tableの任意行にfocusをあてる
-
テーブルの変数について
-
別ページからOnclickでテーブル...
-
javascript クリックすると、あ...
-
一覧から選択した行の行番号を...
-
jsで質問です。 displayプロパ...
-
ハイパーリンクを別ウインドウ...
-
プルダウンで選択すると、DBの...
-
【UWSC】HTML内のある部分を抽...
-
チェックボックスにチェックが...
-
スクロールバーの表示位置を変...
-
ドラッグ&ドロップしたらその...
-
jqueryでどうやってエスケープ?
-
至急!GetElementById でtdの...
-
JavaScriptでテーブルをクリッ...
-
[Javascript]セル内の文字列の...
-
\\u30ad\\u30fc\\u30dc・・・と...
-
javascriptで質問です。 displa...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jsで質問です。 displayプロパ...
-
javascriptで質問です。 displa...
-
ハイパーリンクを別ウインドウ...
-
JavaScriptで特定のtdタグにcla...
-
プルダウンで選択すると、DBの...
-
一覧から選択した行の行番号を...
-
tableの任意行にfocusをあてる
-
至急!GetElementById でtdの...
-
特定<table>内の<td>の色を変える
-
マウスをブラウザの外に出した...
-
添付画像のようなhtmlとcssのス...
-
スクロールバーの表示位置を変...
-
クリックされた罫表セルの行番...
-
チェックボックスにチェックが...
-
JavaScriptでテーブルの行入れ替え
-
HTML中のTABLEのデータを抽出す...
-
jquery datatablesを使用 イン...
-
JavaScriptでテーブルをクリッ...
-
階層式メニューをtableタグ内に
-
マウスオーバー時テーブルの背...
おすすめ情報