- 締切済み
リストボックスからテーブルへ値追加のことで教えて下さい。
皆さん、いつもお世話になっています。 Java Script初心者のため、こういうことがJava Scriptでできるかどうか 分からなかったのですが、教えて下さい。 質問させて頂きたいことは、右側にあるリストボックスの中に表示されているメーカー名を、 真ん中のメニューの「先頭へ追加」をクリックすると、左側テーブルの「出力項目名称」 の中へ追加され、「末尾へ追加」をクリックすると他に出力項目名称へ追加されていた場合には 一番下へ。 また、「番号●●●へ追加」へ任意の番号を入力したらその番号のところに追加されて、 もし他に項目が入っていたらそれが下の番号へ移動するようなものは可能でしょうか。 それと、左側テーブルの「出力項目名称」へ追加になったメーカー名が、順序の変更によって、 「最上位へ」をクリックした時には一番上へ、「上へ」をクリックしたら一つ上へ、 「下へ」をクリックしたら一つ下へ、「最下位へ」をクリックしたら一番下へ 移動して、削除の「×」をクリックするとその項目が削除されて一つ上へ移動するように したいと思っているのですが・・・。 長々とすみませんがよろしくお願いします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=euc-jp" /> <style type="text/css"> td { text-align:center; background:#FFFFFF;} </style> </head> <body> <div style="width:450px; float:left;"> <table width="450" border="0" cellpadding="0" cellspacing="1" bgcolor="#999999"> <tr> <td>番号</td> <td>出力項目名称</td> <td>順序の変更</td> <td>削除</td> </tr> <tr> <td>1</td> <td> </td> <td><font color="#999999">最上位へ 上へ</font> 下へ 最下位へ</td> <td>×</td> </tr> <tr> <td>2</td> <td> </td> <td>最上位へ 上へ 下へ 最下位へ</td> <td>×</td> </tr> <tr> <td>3</td> <td> </td> <td>最上位へ 上へ 下へ 最下位へ</td> <td>×</td> </tr> <tr> <td>4</td> <td> </td> <td>最上位へ 上へ 下へ 最下位へ</td> <td>×</td> </tr> <tr> <td>5</td> <td> </td> <td>最上位へ 上へ <font color="#999999">下へ 最下位へ</font></td> <td>×</td> </tr> </table> </div> <div style="width:160px; float:left; margin:0px 10px 0px 10px; padding:10px 10px 10px 10px; background:#CCCCCC;"> 右で指定した項目を<br /><br /> <a href="#">先頭へ追加</a><br /><br /> <a href="#">末尾へ追加</a><br /><br /> 番号<input name="" type="text" style="width:50px;" />へ<a href="#">追加</a></div> <div style="width:200px; float:left;"> <form> <select name="select" size="5" multiple="multiple" style="width:200px;"> <option value="送信内容">トヨタ</option> <option value="送信内容">日産</option> <option value="送信内容">ホンダ</option> <option value="送信内容">マツダ</option> <option value="送信内容">スバル</option> </select> </form> </div> </body> </html>
- nepiapi
- お礼率46% (6/13)
- JavaScript
- 回答数3
- ありがとう数8
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- yambejp
- ベストアンサー率51% (3827/7415)
#1です。 正直、ハードルが高すぎませんか？ 私個人が運営しているサイトであればこのくらいの仕組みはちょこちょこっと つくりますが、質問者さんのためにここにソースを書いても、おそらく 内容が理解できないでしょうし、なにか一部仕様が変更になったらそれで もうお手上げになりそうな・・・そんな感じをうけました。 ですので残念ですので、今回明確なソースではご提示することは差し控えます。 もうすこし機能を分解し、ひとつひとつご理解を深めながら ソースを構築なさっていくとよろしいかと思います。 その際に躓いた場合は、個別の案件として再度ご質問ください。 いまのままだと「何がわからないか分からない」状態だと思います。 せめて「どこが悪いかわからない」レベルであればご協力できると思います
- steel_gray
- ベストアンサー率66% (1052/1578)
Javascriptで質問のような操作をする事は可能です。 ただし、操作した結果でページを書き換えるとか、どこかに保存するとなるとJavascriptでは出来ません。（cookieへの保存は可能）
- yambejp
- ベストアンサー率51% (3827/7415)
おそらく希望しているであろう処理はできると思いますが いくつか疑問点が。 1)multipleが指定されていますが、これは複数同時にセットする必要が あるということ？ たとえばトヨタ、スバルを選んで先頭へ追加すると、トヨタが１、 スバルが２になるのでしょうか？ 2)一度挿入されたデータを再度挿入してよいものでしょうか？ だめな場合は、リストから削除するのでしょうか？ またその場合、テーブルで削除をするとリストに復活させるのでしょうか？ こまかいチューニングをしていくと結構大がかりな仕組みになると おもいますよ・・・
補足
yambejpさん、ご返答ありがとうございます。 疑問点につきましてご連絡します。 １） はい、yambejpさんのおっしゃるように、複数同時にセットできればいいなと 思っておりました。 ２） 一度挿入されたデータは、右側のリストボックスの中に入ったままで、 選択されている状態にするということは可能でしょうか？ ・・・やはり大掛かりなものになりそうなんですね・・・。 お忙しいところ申し訳ありませんが、ご教授をお願いしますＴＴ