- 締切済み
リストボックスからテーブルへ値追加のことで教えて下さい。
皆さん、いつもお世話になっています。 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)一度挿入されたデータを再度挿入してよいものでしょうか？ だめな場合は、リストから削除するのでしょうか？ またその場合、テーブルで削除をするとリストに復活させるのでしょうか？ こまかいチューニングをしていくと結構大がかりな仕組みになると おもいますよ・・・
関連するQ&A
- tableタグ、heightタグについて
下記のようなテーブルを組んだのですが うまくセルの高さを指定できなくて困っています。 セルの高さを固定せずに作成することは可能でしょうか？ 宜しくお願いします。 <html> <head> </head> <body> <table width="500" border="1"> <tr> <td rowspan="2" height="200" width="40" valign="top"> </td> <td colspan="2"> </td> </tr> <tr> <td width="230" valign="top">１</td> <td rowspan="2" width="230" valign="top"> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> </td> </tr> <tr> <td colspan="2" valign="top">このセルの高さを１の下まで伸ばしたい</td> </tr> </table> </body> </html>
- 締切済み
- HTML
- IE以外のブラウザで隙間ができる
お世話になっております。 上テーブルと下テーブルを隙間なく配置したいのですがIE6,7以外のブラウザだと3pxくらいの隙間ができてしまいます。厚かましいお願いで恐縮ですが、下記タグをチェックしていただけないでしょうか…。 <table width="758" height="160" border="0" cellpadding="0" cellspacing="0" background="image/gazou.jpg" style="background-repeat:no-repeat"> <tr><td height="30"> </td></tr> <tr><td>ここに文字を入れています</td></tr> <tr><td height="30"> </td></tr> </table> <div class="test"><br> <table width="758" border="0" cellpadding="0" cellspacing="0"> <tr><td>ここも文字</td></tr> </table> </div> 上のテーブルには背景画像を指定しており、下テーブル部分に色をつけたいのでdivを使いCSSを適応させています。(デザイン上、下テーブル背景に色をつけるのではダメなので) これが問題なのかと思い、divタグを消してみたりしましたがだめでした。 div"test"のCSSは .test{ margin:0px; padding:0px; background-color:#333333; border-bottom:solid 1px #999999; width:758px; height:262px; } としています。 本当に厚かましいお願いで恐縮ですが、ご教授いただけるととても助かります。どうぞよろしくお願いします。
- ベストアンサー
- HTML
- テーブルの枠線とテキストフィールドの縦、横の隙間をなくしたい
テーブルの枠線とテキストフィールドの縦、横の隙間をなくしたい テーブルの枠線とテキストフィールの枠を隙間なくピッチリとくっつけたい です。コードを掲示しますのでご存知の方はどなたか修正願います <body> <table width="900" border="1" style="height:25px;"> <tr> <td rowspan="2" width="400"> </td> <td rowspan="2" width="50"> </td> <td rowspan="2" width="100"><input type="text"readonly="readonly"value="サンプルシステム（株）" style="height:25px;"/> </td> <td rowspan="2" width="50"> </td> <td rowspan="2" width="100"><input type="text"readonly="readonly" value="システム管理者"style="height:25px;"/> </td> <td width="60"style="height:12px;">実施日</td> <td width="140"><input type="text" readonly="readonly" width="140"value="2010/07/01" style="height:12px;"/></td> <tr> <td height="19" style="height:12px;">CODE</td> <td><input type="text" readonly="readonly" width="140" value="TTSORD50P" style="height:12px;"/></td> </tr> </table> </body>
- ベストアンサー
- HTML
- テーブルの中の複数行テキスト欄の下に書き込めない
またもスペースお借りします。 TOPページで使う予定の更新履歴を残す 複数行テキスト欄の下にバナーやボタンを貼りたいのですが、 なぜが外テーブルからはじき出されてしまうのです。 複数行テキスト欄の上には書き込めるのですが、 下に書き込むようにするには、どのようなタグを入力すれば良いでしょうか？ 具体的に教えてくださると助かります。 これがコピペです↓ <html> <head> <title>top</title> </head> <body background="http://背景URL"> <Basefont Size="2"> <br> <br> <table align="center"border="0" width="700" height="500" style="border:3px double #999999;" cellpadding="5" cellspacing="0"bgcolor="#ffffff"> <Tr> <Td> <br> <Td Align="left" Valign="top"> <B>●更新履歴</B> <div style="width:230px;height:130px;overflow-y:scroll"style="border:3px double #000000;" cellpadding="5" bgcolor="#ffffff"Td Align="left"Valign="bottom"> ああああ<br> ああああ<br> ああああ<br> </table> </div> <br> あああああああああ </Td> </Tr> </Table> </body> </html>
- ベストアンサー
- HTML
- cssで位置指定したテーブル下のプルダウンが見えてしまう問題
cssで位置指定したウィンドウの下にフォームのプルダウンがあると、 プルダウンの部分に穴が開いたような状態になります。 firefox,operaでは起きずIE6で起きます。 何か良い手はないでしょうか。 よろしく、お願いします。 <html> <head> <style> <!-- #poplink {position:absolute;left:0px; top:30px; width:100px; z-index:9;} #poplink table {border-collapse: collapse; background-color: #ffffff;} #poplink td {border: 2px solid #00ffff; } //--> </style> </head> <body> <div id="poplink"> <table width="80px" height="80px"> <tr><td> [<a onClick="PopupOff('poplink')">閉じる</a>]<br /> ポップアップ </td></tr></table> </div> <a href="#" onClick="PopupOn('poplink')">リンク</a><br /> <form> <select> <option>aaaa</option> <option>bbbb</option> </select> </form> </body> </html>
- ベストアンサー
- HTML
- テーブル内のチェックボックスのvalue受け渡し
jspで、テーブルの中に用意したチェックボックスのvalueを別のプログラム（select_data_c）へ渡したいのですが、うまくいきません。alertを使って確認してみたところ、undefinedが表示されました。 また、受け側のプログラムには特に問題は無いようでした。 以下がソースの一部です。かなりの長文で申し訳ございませんが、ご教授よろしくお願いします。 <%! //コード String code_Act_App = "2"; ←アプリ実行の記述です。出力ボタンを押したらcsvを作成 %> <html> <head> <title>データ取得条件選択</title> <script type="text/javascript"> function entryChange2(){ if(document.getElementById('changeSelect')){ id = document.getElementById('changeSelect').value; if(id == 'select1'){ //フォーム document.getElementById('firstBox2').style.display = ""; document.getElementById('firstBox22').style.display = ""; document.getElementById('secondBox2').style.display = "none"; document.getElementById('secondBox22').style.display = "none"; }else if(id == 'select2'){ //フォーム document.getElementById('firstBox2').style.display = "none"; document.getElementById('firstBox22').style.display = "none"; document.getElementById('secondBox2').style.display = ""; document.getElementById('secondBox22').style.display = ""; }}} //オンロードさせ、リロード時に選択を保持 window.onload = entryChange2; function output(){ //変数に代入 var d = document.chkList.chk.value; alert(d); ←ここでundefinedが表示されてしまいます checkvalue = ''; //チェックボックスがONの時はその値を設定する if (document.chkList.chk.checked == true) { document.C_FUNC.chk.value = document.chkList.chk.value ; }} </script> </head> <body> <div align="center"> <h1>データ取得条件選択</h1> <table border="0" cellspacing="0" cellpadding="0"> <tr> <th>対象マスター</th> <td> <select id="changeSelect" name="hoge" onchange="entryChange2();"> <option value="select1">マスタ選択</option> <option value="select2">社員マスター</option> </select> </td> </tr> </table> <!-- 表示非表示切り替え --> ↓２つのテーブルを横に並べて表示させています <table><tr><td> <table id="firstBox2"> <tr> <th>マスター項目一覧</th> <td><div style="height:200px; width:300px; border :1px solid #000000; overflow-x:scroll;overflow-y:scroll"> 対象マスターを選択し、<br> 表示ボタンを押してください</div></td></tr> </table> </td><td valign="top"> <table id="firstBox22"> <tr> <th>関連テーブル項目一覧</th> <td valign="top"><div style="height:200px; width:300px; border :1px solid #000000; overflow-x:scroll;overflow-y:scroll"> 対象マスターを選択し、<br> 表示ボタンを押してください</div></td></tr> </table> </td></tr></table> <!-- 表示非表示切り替え --> <table><tr><td> <table id="secondBox2"> <tr> <th>マスター項目一覧</th> <td><form name="chkList" method="POST" > <div style="height:200px; width:300px; border :1px solid #000000; overflow-x:scroll;overflow-y:scroll"> <input type="checkbox" name="chk" value="会社コード">会社コード<br> <input type="checkbox" name="chk" value="社員番号">社員番号<br> <input type="checkbox" name="chk" value="削除フラグ">削除フラグ<br></div></form> </td></tr></table> </td><td valign="top"> <table id="secondBox22"> <tr> <th>関連テーブル項目一覧</th> <td><form name="chkList" method="POST" > <div style="height:200px; width:300px; border :1px solid #000000; overflow-x:scroll;overflow-y:scroll"> ここにもマスター項目一覧と同様にチェックボックスを置いています。項目数が多いのでスクロールバーを付けています。 </div></form></td> </tr> </table> </td></tr></table> <form action = "select_data_c" name="C_FUNC" method="POST"> <input type = hidden name = "chk" value ="d"> <input type = hidden name = "C_FUNC" value = "<%= code_Act_App %>"> <input type="submit" name = "OutPut" value="上記の条件で出力" onClick="output()"> </form> </div> </body> </html>
- 締切済み
- JavaScript
- tableの外枠をCSSで表示させない方法
HTMLで作ったテーブルの外枠の縦線をCSSで表示させないようにしたいのですが可能でしょうか？ HTMLはさわらずにできる限りCSSでやりたいと思い、いろいろ試してみましたがうまくいきませんでした。 線種はsolidを使いたいです。 よろしくお願いいたします。 <html> <head> <title>css table</title> <style type="text/css"> <!-- table.sample { width:550px; height:auto; border:solid 1px; border-collapse:collapse; border-left:none; border-right:none; } .sample th { width:100px; border:solid 1px; } .sample tr { border:solid 1px; } .sample td { border:solid 1px; } --> </style> </head> <body> <table class="sample" frame="hsides"> <tr> <th scope="row"> </th> <td> </td> <td></td> <td></td> </tr> <tr> <th scope="row"> </th> <td> </td> <td></td> <td></td> </tr> <tr> <th scope="row"> </th> <td> </td> <td></td> <td></td> </tr> <tr> <th scope="row"> </th> <td> </td> <td></td> <td></td> </tr> <tr> <th scope="row"> </th> <td> </td> <td></td> <td></td> </tr> </table> </body> </html>
- ベストアンサー
- CSS
- tableが縮まらない
<th width="20" ><div style="background-color:#FF9;height:28px;padding-top:12px">**</div></th><td width="10" bgcolor="#CCFFFF" >**</font>**</font><br><font><font color="#000000" >45</font></font></td> どうしても <td width="10" bgcolor="#CCFFFF" > この部分が縮まらないです。何故でしょうか？？
- ベストアンサー
- CSS
- ●tableをCSSで書き直すには(HTMLソース付き)
いつも勉強させていただいております。 今回は質問をさせていただけないでしょうか。 上の表の枠のように少し立体感があるようにしたいと思います。 これを、CSSにしたいのですが、border-styleをいろいろ試しても同じようになりません。 どのようにすれば良いでしょうか？ <html> <STYLE TYPE="text/css"> <!-- .TTT { border-style:ridge; padding:0px; border-width:1px; } --> </STYLE> <body bgcolor="#FF88FF"> <table width="270" border="1" cellpadding="0" cellspacing="0" > <tr> <td>こんな感じにしたいです。</td> <td>BBB</td> </tr> </table> <br> <table style="width:270px;" class="TTT"> <tr class="TTT"> <td class="TTT">なぜか、こんな感じになってしまいます。</td> <td class="TTT">DDD</td> </tr> </table> <br> </body> </html>
- 締切済み
- HTML
- 一番下にしたいのですが・・
<html> <head></head> <body> <table> <tr valign="top"> <td width="200"> Ａ </td> <td width="650"> Ｂ </td> </tr> </table> </body> </html> Ａの部分メニューリンクを５項目(上から200px)を入れています。 Ｂの部分にはコンテンツ(上から1000px)が入っています。 メニューの５項目の下に <div valign="bottom"> （アクセス解析バナー画像） </div> を追加してこの画像だけを左のセルの一番下にくっつけたかったのですが、 うまくいかないみたいです。 どのようにしたらよいのでしょうか？よろしくお願いします。
- ベストアンサー
- HTML
補足
yambejpさん、ご返答ありがとうございます。 疑問点につきましてご連絡します。 １） はい、yambejpさんのおっしゃるように、複数同時にセットできればいいなと 思っておりました。 ２） 一度挿入されたデータは、右側のリストボックスの中に入ったままで、 選択されている状態にするということは可能でしょうか？ ・・・やはり大掛かりなものになりそうなんですね・・・。 お忙しいところ申し訳ありませんが、ご教授をお願いしますＴＴ