• 締切済み

表の中のセルの位置を把握したいです

伝票入力の画面を作っているところです。 表内の1番左の「goodsId」 のセルでダブルクリックすると商品一覧ダイアログボックスが 開いて、1件を選択すると、表の中に商品名や単価等を表示する流れになっています。 下のコードはその表(伝票形式)と商品一覧ダイアログ呼び出すところです。 ダイアログを開く → 商品一覧から1件を指定 → 表に商品名等を表示 はうまくいくのですが、表内の表示位置がうまくいきません。 どの行の「goodsId」でダブルクリックしても先頭行に表示されてしまいます。 これは、カレント行の把握が必要なんだと思いますが、やり方がわかりません。 いろいろググってみると、一旦表内のすべてのセルを読み込んでクリックした 場所のrowsインデックスとcellsインデックスを取得するやり方ま見つけたんですが、 私が作ったこのコードにどのように組み込んだらいいのかがわからないのです。 どなたか教えて下さい。 よろしくお願いします。 // 売上明細表示 function indicateSalesDetail(lines){ var res = ''; for (var i = 0; i < lines; i++){ res += '<tr>' + '<td align="center" style="width: 10%;">' + '<input type="text" id="goodsId" name="goodsId" ondblclick="doActionGoodsList();" />' + '</td>' + '<td align="left" style="width: 60%;">' + '<input type="text" id="goodsName" name="goodsName" />' + '</td>' + '<td align="center" style="width: 10%;">' + '<input type="text" id="price" name="price" />' + '</td>' + '<td align="center" style="width: 5%;">' + '<input type="text" id="quantity" name="quantity" />' + '</td>' + '<td align="left" style="width: 15%;">' + '<input type="text" id="amount" name="amount" />' + '</td>' + '</tr>'; } res += '</table>'; var obj = document.getElementById("datatable"); obj.innerHTML ='<table><tr><th>商品ID</th><th>商品名</th><th>単価</th><th>数量</th><th>金額</th></tr>' + res; } // 商品一覧表示処理 function doActionGoodsList(){ var url = "goodslistdialog.php"; var winWidth = "750px"; var winHeight = "500px"; var options = "dialogWidth=" + winWidth + ";dialogHeight=" + winHeight + ";center=1;status=1;scroll=1;resizable=1;\minimize=0;maximize=0;"; var returnValue = window.showModalDialog(url, window, options); var goodsId = returnValue; if(goodsId != null){ $.get('../code/goods/GoodsDetail.php', {"goodsId":goodsId}, callbackGoods); } }

みんなの回答

  • hirotn
  • ベストアンサー率59% (147/246)
回答No.1

現状どのようにモーダルウインドウの表示位置を指定しているのかがわからないので回答できない状態です。 ---- >+ '<input type="text" id="goodsId" name="goodsId" ondblclick="doActionGoodsList();" />' この行とモーダルウインドウを合わせたいということだと考えると、 IDは1ドキュメントに1つなので、classでしょうか。 .class:eq(index)とするか、 class="goodsId"数字という形式にして、 $.(".goodsId" + val) とするか。 現状は、id="goodsId"が複数存在して、どのオブジェクトを参照してよいかわからず、ブラウザによって不定の状態と考えます。 ---- あるいは、 >いろいろググってみると、一旦表内のすべてのセルを読み込んでクリックした >場所のrowsインデックスとcellsインデックスを取得するやり方ま見つけたんですが、 >私が作ったこのコードにどのように組み込んだらいいのかがわからないのです。 これはセレクタのことを仰ってますでしょうか?

関連するQ&A

  • htmlでインプットボックスを横並びに表示したい。

    ホームページを作成しておりますが、tdの中にinput type="text"にてテキストボックスを4つ作成したいと考えております。 こちらで拝見いたしましたチェックボックスの右側に文字を表示される方法をご参考にさせていただき、下記を作成しましたが、縦並びになってしまいます。 何とかして縦2×横2に置き換えることはできないでしょうか? ブラウザはIE11を使用しており、コードはVisualStudioCodeを使用しております。 <div style="top : 161px;left : 8px; position : absolute; z-index : 4; width : 847px; height : 252px; " id="Layer5"> <div style="background: white; padding: 10px; margin-bottom: 10px; border: 1px solid #333333"> <table border="1" height="252" width="818"> <tr bgcolor="gray" style="color:white" height="50"> <th height="42" width="92"><b>列1</b></th> <th height="42" width="212">列2・列3<br>列4・列5</th> <th height="42" width="137">列7/列8</th> <th height="42" width="189"><b>列9/列10</b></th> </tr> <tr bgcolor="lightyellow"> <td align="center" height="47" width="92"> <input type="text" name=列1 style="background:white; color:#000000;" align="middle" value="83行目"> </td> <td align="center" height="47" width="312"> <input type="text" name=列2 style="background:white; color:#000000;" align="middle" value="86行目"> <input type="text" name=列3 style="background:white; color:#000000;" align="middle" value="87行目"> <input type="text" name=列4 style="background:white; color:#000000;" align="middle" value="88行目"> <input type="text" name=列5 style="background:white; color:#000000;" align="middle" value="89行目"> </td> <td align="center" height="47" width="137"><input type="text" name=列7 style="background:white; color:#000000;" align="middle" value="92行目"> <span> <input type="text" name=列8 style="background:white; color:#000000;" align="middle" value="93行目"> </span> </td> </div> <td align="center" height="47" width="189"><input type="text" name=列9 style="background:white; color:#000000;" align="middle" value="96行目"> <input type="text" name=列0 style="background:white; color:#000000;" align="middle" value="97行目"> </td> </tr> <tr> <td align="center" height="47" width="92"></td> <td align="center" height="47" width="212"></td> <td align="center" height="47" width="137"></td> <td align="center" height="47" width="189"></td> </tr> </table> </div> </div> 【上記で表示させた場合】 ーーーーー|  86行目  |ーーーーー| ーーーーー|  87行目  |ーーーーー|  96行目  83行目  |  88行目  |  92行目|  97行目 ーーーーー|  89行目  |ーーーーー| 【やりたいこと】 ーーーーー|ーーーーーーーーーー|ーーーーー| ーーーーー|  86行目|87行目 |ーーーーー|  96行目  83行目  |  88行目|89行目 | 92行目 |  97行目 ーーーーー|ーーーーーーーーーー|ーーーーー|

  • JavaScriptの質問です。

    JavaScriptの質問です。 下記フォームで、 1番が入力されると、 2、3番目のエリアがグレーになって入力不可になる方法を教えてください。 <tr> <th align="right">1番</th> <td><input type="text" size="10" name="shopid" id="shopid" /></td> </tr> <tr> <th align="right">2番</th> <td><input type="text" size="10" name="area" /></td> </tr> <tr> <th align="right">3番</th> <td><input type="text" size="10" name="business" /></td> </tr> <tr> よろしくお願いします。

  • 動的な表の計算

    いつもお世話になります。 見よう見まねでやっている初心者です。 下記のような動的な表があります(PHPで表の行が可変します。) name="aa"に入力された値とname="bb"に入力された値の足し算の 回答をname="kaito"に出したいと思っています。 計算ボタンを押すとname="kaito"に答えを出したいのですが、 以下のような式ですと当然ながら全く反応しません。 javascriptまたはPHPをどう記述すれば表の値を計算できるようになるのでしょうか? できれば具体的に教えて頂ければ大変助かります。 ご教授の程よろしくお願い致します。 <script> function keisan(){document.tasizan.kaito.value=(document.tasizan.aa.value)+(document.tasizan.bb.value)} </script> <form name="tasizan"> <table width="100" border="1"> <tr> <th width="10" scope="col">a</th> <th width="10" scope="col">b</th> <th width="20" scope="col">回答</th> </tr> <tr> <td><INPUT type="text" name="aa" ></td><td><INPUT type="text" name="bb" ></td><td><INPUT type="text" name="kaito" ></td> <td><input type="button" value="計算" onclick="keisan()"/></td> </tr> <tr> <td><INPUT type="text" name="aa" ></td><td><INPUT type="text" name="bb" ></td><td><INPUT type="text" name="kaito" ></td> <td><input type="button" value="計算" onclick="keisan()"/></td> </tr> <tr> <td><INPUT type="text" name="aa" ></td><td><INPUT type="text" name="bb" ></td><td><INPUT type="text" name="kaito" ></td> <td><input type="button" value="計算" onclick="keisan()"/></td> </tr> <tr> <td><INPUT type="text" name="aa" ></td><td><INPUT type="text" name="bb" ></td><td><INPUT type="text" name="kaito" ></td> <td><input type="button" value="計算" onclick="keisan()"/></td> </tr> </table> </form>

  • テーブルのテーブルの間に間ができるのでしょうか?

    はじめまして、超html初心者のものです。 なぜ同じようテーブルを3つ書いているのに一番上のテーブルと真ん中のテーブルの間が開いてしまっているのかがわかりません。 あと、一番上のテーブルの-から先をもう少し左に寄せることもうまくいきません。 なにかアドバイスをよろしくお願いします。 ↓これがソースです。 <html> <head><title>test</title> </head> <form> <table border=1 cellspacing=0 cellpadding=2 width=760> <tr> <th width=95 height=30 align="right">日付け:</th> <td width=284> <input type="text"><input type="button"> </td> <td>&nbsp;-&nbsp;</td> <td><input type="text"><input type="button"></td> </tr> </table> <table border=1 cellspacing=0 cellpadding=2 width=760> <tr> <th width=95 height=30 align="right">部署:</th> <td width=100> <select name="busyo"></select> </td> <th width=80 align="right">営業所:</th> <td width=100> <select name="eigyousyo"></select> </td> <th width= 80 align="right">担当コード:</th> <td width=450> <select name="tantocode"></select> </td>   </tr> </table> <table border=1cellspacing=0cellpadding=2width=760> <tr> <th width=80 align="right">権限:</th> <td width=700> <select name="kengen"></select> </td> </tr> </table> </form> </html>

  • テーブル上のチェックボックスにチェックがされない

    データベースからメール送信履歴を検索し、結果をリスト表示しようとしています。 Ajax通信をして結果をJsonで受け取っています。 送ったか否かは「sendF」に書かれており、「0」なら未送信、「1」なら送信済みです。 「sendF」が「1」ならチェックボックスにチェックを入れようと思って 以下のコードを書きました。 でも、テーブル上のチェックボックスにはチェックが入りません。 console.logで数値が「1」を確認していますが、表示がされません。 どこが悪いか教えて頂けるとうれしいです。 よろしくお願いします。 $.ajax({ type: "POST", url: "../SendList.php", data: {"condition":condition}, // Webサーバに送信するデータ dataType: 'text', // Webサーバか受信するデータの形式 success: function(request){ // ajax通信が成功したときの処理 var json = JSON.parse(request); var res = ''; for (var i = 0; i < json.length; i++){ res += '<tr>' + '<td style="text-align: center;">' + json[i].personId + '</td>' + '<td style="text-align: center;">' + json[i].personName + '</td>' + '<td style="text-align: center;">' + '<input type="checkbox" id="sendF[' + i + ']" name="sendF" />' + '</td >' + '<td style="text-align: left;>' + '<input type="text" id="memo" name="memo" value="' + json[i].memo + '" />' + '</td >' + '</tr>'; if(json[i].sendF == 1){ $('#sendF[' + i + ']').prop('checked', true); console.log("1でした"); } } var obj = document.getElementById("datatable"); obj.innerHTML ='<tr><th>担当者ID</th><th>担当者名</th><th>送信F</th><th>メモ</th></tr>' + res; }, error: function(msg){ // ajax通信が失敗したときの処理 alert( "Data Saved: " + msg ); } });

  • Javascriptで自動計算の合計の式でエラー

    度々すみません。 前回こちらで質問させて頂きましたものです。 http://okwave.jp/qa/q8737139.html 教えて頂いた内容を確認してフォームの合計を表示するところまでは出来たのですが、合計する列をひとつ増設した所、D列の合計は教えて頂いた式で合計が無事表示されたのですが、C列の合計が合計ではなく文字の並びが表示されてしまいました。 色々調べてみたのですが、この現象の原因がよくわかりません。 何かエラーがあるのでしょうか。 お知恵を貸して頂けると嬉しいです。 宜しくお願いします。 <スクリプト> <script type='text/javascript'> function keisan(){ var price1 = (document.form1.a1.value) * (document.form1.b1.value) * (document.form1.c1.value); document.form1.金額1.value = price1 ; var price2 = (document.form1.a2.value) * (document.form1.b2.value) * (document.form1.c2.value); document.form1.金額2.value = price2 ; var price3 = (document.form1.a3.value) * (document.form1.b3.value) * (document.form1.c3.value); document.form1.金額3.value = price3 ; document.form1.total.value = price1 + price2 + price3; var f1 = (document.form1.c1.value); document.form1.c1.value = f1 ; var f2 = (document.form1.c2.value); document.form1.c2.value = f2 ; var f3 = (document.form1.c3.value); document.form1.c3.value = f3 ; document.form1.ctotal.value = f1 + f2 + f3; } </script> <HTMLソース> <body> <form method="post" name="form1"> <table width="473" border='1'> <tr> <td align='center'>&nbsp;</td> <td align='center'>A</td> <td align='center'>B</td> <td align='center'>C</td> <td align='center'>D</td> </tr> <tr> <td>1</td> <td><input type='text' name='a1' onchange='keisan()' style='width:50px' /></td> <td><input type='text' name='b1' onchange='keisan()' style='width:50px' /></td> <td><input type='text' name='c1' onchange='keisan()' style='width:25px' /></td> <td><input type='text' name='金額1' style='width:100px' /></td> </tr> <tr> <td>2</td> <td><input type='text' name='a2' onchange='keisan()' style='width:50px' /></td> <td><input type='text' name='b2' onchange='keisan()' style='width:50px' /></td> <td><input type='text' name='c2' onchange='keisan()' style='width:25px' /></td> <td><input type='text' name='金額2' style='width:100px' /></td> </tr> <tr> <td>3</td> <td><input type='text' name='a3' onchange='keisan()' style='width:50px' /></td> <td><input type='text' name='b3' onchange='keisan()' style='width:50px' /></td> <td><input type='text' name='c3' onchange='keisan()' style='width:25px' /></td> <td><input type='text' name='金額3' style='width:100px' /></td> </tr> <tr> <td colspan="3" align='right'>合計</td> <td><input type='text' name='ctotal' style='width:25px' /></td> <td><input type='text' name='total' style='width:100px' /></td> </tr> </table> </form> </body>

  • colspan を使用した際のIE7の動作

    行き詰ってしまったのでこちらで質問させていただきます。 テーブルで表を作成しているのですが、 colspanで指定したセルの中にinputを入れると急にIE7でレイアウトが崩れます。 IEの他のverでは大丈夫なのですが、7だけくずれてしまうのは何か回避策があるのでしょうか? ちなみに、下記のようなソースです。 全体で8列とり、1行目は項目3つに対してそれぞれinputを入れる列があり、 2行目は項目2つでinputを入れる列があります。 1行目は3等分にしたく、2行目は2等分にしたい形です。 何かほかに方法があるのでしょうか? ご教授いただければと思います。 <style type="text/css"> .test{border-collapse:collapse;} .test td,.test th{border:solid 1px #000;} </style> <table width="952" border="1" cellspacing="0" cellpadding="0" class="test"> <tr> <th width="80">項目1</th> <td width="235"><input name="" type="text" value="12345" /></td> <th width="80">項目2</th> <td colspan="3"><input name="" type="text" value="12345" /></td> <th width="80">項目3</th> <td width="235"><input name="" type="text" value="12345" /></td> </tr> <tr> <th>項目4</th> <td colspan="3"><input name="input2" type="text" value="12345" /></td> <th width="80">項目5</th> <td colspan="3"><input name="input3" type="text" value="12345" /></td> </tr> </table>

    • ベストアンサー
    • HTML
  • メールフォームについて質問です。

    メールフォームについて質問です。 <h3>ご注文ご依頼メール</h3> <span style="font-weight: bold;"></span> <center> <form style="margin-left: 0px; width: 800px;" method="post" action="当方アドレス" enctype="text/plain" name="メールフォーム"><br /> <table style="width: 694px; height: 202px;"> <tbody> <tr> <td style="text-align: center;"><b>お名前</b></td> <td style="width: 599px; text-align: left;"><input size="40" name="name" type="text" /></td> </tr> <tr> <td style="text-align: center;"><b>郵便番号</b></td> <td style="text-align: left;"><input size="20" name="郵便番号" /></td> </tr> <tr> <td style="text-align: center;"><b>ご住所</b></td> <td style="width: 599px; text-align: left;"><input size="80" name="jyusho" type="text" /></td> </tr> <tr> <td style="text-align: center;"><b>お電話番号</b></td> <td style="text-align: left;"><input size="40" name="電話番号" type="text" />  <font color="#ff0000">(記入例)000-0000-0000</font></td> </tr> <tr> </tbody> </table> <br /> ご希望の商品名・数量などをお書き込みください。<br /> <table> <tbody> <tr> <td colspan="2" align="center"><b><font color="#ff00ff">ご記入内容に問題がなければ、送信するのボタンをクリックして下さい。</font></b></td> </tr> <tr> <td style="text-align: center;" colspan="2"> <input value="送信する" type="submit" />   <input value="取り消す" type="reset" /></td> というメールフォームを作ったのですが、送信ができません。 どこが間違っているのでしょうか? 全くの素人なのでどこが違うのか見当もつきません。 それから、送信後に送信確認ページを表示させたいのですが、どうしたらよろしいでしょうか?

  • JSのコードで保存ができません

    以下のコードなのですがnameの部分だけ保存ができません なぜなのでしょうか <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name1="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel="stylesheet" href="components/loader.css"> <script src="components/loader.js"></script> </head> <body> <table border="3" align="center" style=border-spacing:0px;> <tr> <th width="20" height="30">Day</th> <th width="80">name</th> <th width="70">in</th> <th width="100">out</th> <th width="100">total</th> </tr> <tr> <th><input type="text" id="day" style="width : 30px; height : 20px;"></th> <td><input type="text" id="name" style="width : 80px; height : 20px;"></td> <td><input type="text" id="in_m" style="width : 50px; height : 20px;"></td> <td><input type="text" id="out_m" style="width : 50px; height : 20px;"></td> <td><input type="text" id="total" style="width : 50px; height : 20px;"></td> </tr> </table> <script> //保存関係 var day = document.getElementById("day"); var name = document.getElementById("name"); var in_m = document.getElementById("in_m"); var out_m = document.getElementById("out_m"); var total = document.getElementById("total"); window.onload = function() { var body_day = localStorage.getItem("day"); var body_name = localStorage.getItem("name"); var body_in_m = localStorage.getItem("in_m"); var body_out_m = localStorage.getItem("out_m"); var body_total = localStorage.getItem("total"); if (body_day != null) day.value = body_day; if (body_name != null) name.value = body_name; if (body_in_m != null) in_m.value = body_in_m; if (body_out_m != null) out_m.value = body_out_m; if (body_total != null) total.value = body_total; } day.onchange = function() { localStorage.setItem("day",day.value); } name.onchange = function() { localStorage.setItem("name",name.value); } in_m.onchange = function() { localStorage.setItem("in_m",in_m.value); } out_m.onchange = function() { localStorage.setItem("out_m",out_m.value); } total.onchange = function() { localStorage.setItem("total",total.value); } </script> </body> </html>

  • htmlで行数が増えた場合に自動的に範囲を広げる

    現在、ホームページを作成しておりますが、htmlで表示させた場合に一行だけですと画面内に収まりますが、行数が増えていくとその下にあるボタンにかぶさってしまいます。 表示する行数が増えた場合に自動的に下に伸ばす方法はございますでしょうか? HTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="justsystems:HPB-Input-Mode" content="mode/flm; pagewidth=940; pageheight=1200"> <meta name="GENERATOR" content="JustSystems Homepage Builder Version 20.0.6.0 for Windows"> <title>タイトル</title> <link rel='stylesheet' href='/stylesheets/style.css' /> </head> <body bgcolor="#a9a9a9"> <table border="1" height="252" width="818"> <tr bgcolor="gray" style="color:white" height="50"> <th height="42" size=10><b>注文日</b></th> <th height="42" width="212">注文名/オプション<br>注文先・個数</th> <th height="42" size=10>合計金額/合計個数</th> <th height="42" size=20><b>注文者/入力者</b></th> </tr> ーーーここでテーブルから複数行取得 <% for(var i in content) { %> <tr bgcolor="lightyellow"> <% var obj = content[i]; %> <td align="center" height="47" size="10"> <input type="text" name=注文日 size="10" style="background:white; color:#000000;" align="middle" value="注文日"> </td> <td align="center" height="47" width="10" style="white-space:nowrap;" > <input type="text" name=注文名 size=4 style="background:white; color:#000000;" align="middle" value="注文名"> <input type="text" name=オプション size=1 style="background:white; color:#000000;" align="middle" value="無"> <input type="text" name=注文先 size=4 style="background:white; color:#000000;" align="middle" value="注文先"> <input type="text" name=単価 size=1 style="background:white; color:#000000;" align="middle" value="単価">   <input type="text" name=個数 size=1 style="background:white; color:#000000;" align="middle" value="個数"> </td> <td align="center" height="47" size=10> <input type="text" name=合計金額 size=10 style="background:white; color:#000000;" align="middle" value="合計金額"> <input type="text" name=合計数 size=10 style="background:white; color:#000000;" align="middle" value="合計数"> </td> <td align="center" height="47" size=20> <input type="text" name=注文者 size=20 style="background:white; color:#000000;" align="middle" value="注文者"> <input type="text" name=入力者 size=20 style="background:white; color:#000000;" align="middle" value="入力者"> </td> </tr> <% } %> <div style="width : 468px;height : 16px;top : 486px;left : 441px; position : absolute; z-index : 2; " id="Layer7" align="right"> <input type="submit" value=" 結果 "> <input type="button" value=" キャンセル "> <input type="button" value=" 戻  り "> </div> </form> </div> </body> </html>

    • ベストアンサー
    • HTML

専門家に質問してみよう