動的なtableの値を取得したい
- 動的なtableの値を取得する方法について悩んでいます。テーブル内の回答ボタンをクリックすると、その行のb列の値をテキストボックスに表示したいです。
- 初心者なので具体的な回答がほしいです。
- どのようにfunction kaito()を書けば目的の値を取得できるのか教えてください。
- ベストアンサー
動的なtableの値を取得したい
いつもお世話になります。 見よう見まねでやっている超初心者です。 下記の様なテーブル（phpで読み込んでいますので実際は動的です。） の回答ボタンをクリックすると テーブル下の<INPUT type="text" name="kotae">に ボタンをクリックされた行のｂ列の値を入れたいと思っています。 function kaito()をどのように書いたら取得できるか悩んでいます。 初心者なもので具体的な回答でしたら助かります。 ご教授の程どうぞよろしくお願い致します。 <html> <head> <meta content="text/html; charset=utf-8" /> <script> </script> </head> <body> <table width="100" border="1"> <tr> <th width="30" scope="col">a</th> <th width="30" scope="col">b</th> <th width="40" scope="col">c</th> </tr> <tr> <td>1</td> <td>2</td> <td><input type="button" value="回答" onclick="kaito()"/></td> </tr> <tr> <td>5</td><td>3</td> <td><input type="button" value="回答" onclick="kaito()"/></td> </tr> <tr> <td>5</td> <td>4</td> <td><input type="button" value="回答" onclick="kaito()"/></td> </tr> <tr> <td>5</td> <td>5</td> <td><input type="button" value="回答" onclick="kaito()"/></td> </tr> </table> <INPUT type="text" name="kotae" size="12" > </body> </html>
- tansansooda
- お礼率77% (27/35)
- JavaScript
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
inputはformに入れ子にしてください こんな感じで・・・ <script> function kaito(obj){ var v=obj.parentNode.parentNode.cells[obj.parentNode.cellIndex -1].innerHTML; obj.form.elements["kotae"].value=v; } </script> <form> <table width="100" border="1"> <tr> <th width="30" scope="col">a</th> <th width="30" scope="col">b</th> <th width="40" scope="col">c</th> </tr> <tr> <td>1</td> <td>2</td> <td><input type="button" value="回答" onclick="kaito(this)"/></td> </tr> <tr> <td>5</td><td>3</td> <td><input type="button" value="回答" onclick="kaito(this)"/></td> </tr> <tr> <td>5</td> <td>4</td> <td><input type="button" value="回答" onclick="kaito(this)"/></td> </tr> <tr> <td>5</td> <td>5</td> <td><input type="button" value="回答" onclick="kaito(this)"/></td> </tr> </table> <INPUT type="text" name="kotae" size="12" > </form>
その他の回答 (1)
- babu_baboo
- ベストアンサー率51% (268/525)
てーぶるは、 form ようそでかこんでください。 input についている、onclick="kaito()"は、さくじょしてください。 したのこーどの、ぜんかくくうはくは、はんかくにしてください。 IE8いかは、かんべんしてください。 ばぶりんぐするいべんとは、おやでかんしできるよ。 function getTr (n) { return n ? ('TR' === n.nodeName) ? n: arguments.callee (n.parentNode) : null; } function kaito (event) { var e = event.target; var r; if (('INPUT' !== e.nodeName) || ('button' !== e.type) || ('回答' !== e.value)) return; if (r = getTr (e)) e.form.elements['kotae'].value = r.cells[1].textContent; } document.addEventListener ('click', kaito, false);
お礼
ご回答ありがとうございます。 これでもいけるんですね。 ただ、これだと私の知識不足で buttonのkaito()に外部javascript どうしたら呼び出せられるのか解りませんでした。 実はkaito()には他の外部javascriptもあったので、 出来ればに付け足したかったのです。 頂いたご回答は私には到底考えられないものです。 具体的な回答を頂いて大変感謝いたします。 これを解析できるようもっと勉強しなくてはいけませんね。 本当にありがとうございました。 又何かありましたら是非よろしくお願い致します
関連するQ&A
- 動的な表の計算
いつもお世話になります。 見よう見まねでやっている初心者です。 下記のような動的な表があります（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>
- ベストアンサー
- JavaScript
- テーブルの項目の値取得
テーブルの項目にボタンを配置し、そのボタンが押された時には、 その行のデータを別ウィンドウで開き、編集する。 というような物を書きたいのですが、 ボタンを押した際にその行の情報を取得するにはどうしたらよいでしょうか？ また、その行の見えない所（内部的な処理にのみ使える）にコードを持たせておくような事は可能なのでしょうか。 <table border="0" cellpadding="0" cellspacing="0" class="playguide-list"> <tr> <th class="head">名前</th> <th class="head-tel">電話番号</th> <th class="head-tel">ファックス</th> <th class="head-syori">処理</th> </tr> <tr> <td>＊＊＊＊＊＊</td> <td>＊＊＊＊＊＊</td> <td>＊＊＊＊＊＊</td> <td> <input type="button" value="編集" onclick="" /> <input type="button" value="削除" onclick="" /> </td> </tr> </table> このような感じです。 よろしくお願いします。
- ベストアンサー
- JavaScript
- ファイルの内容が表示できるか？
外部ファイルでお願いします。 参照ボタンから、何でもいいのでファイルを選びます。ファイル名がテキストボックスに表示されます。 下にあるYESボタンを押すと、その下にコメントアウト してあるテキストボックスが上記のID,ファイル名に追加されテキストボックスの中に参照ボタンから選んだ ファイルが挿入される。また、左のNOボタンを押すと その列が削除されるというやり方は可能でしょうか？ <html> <head> <title>画面</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> </head> <body> <table> <col width="100"> <col width="100"> <tr> <td> <input type="file" name="file"size="50"> </td> </tr> </table> <table border ="1"> <col width="50"> <col width="200"> <tr> <th>ID</th> <th>ファイル名</th> </tr> </table> <input type="button" name="yes" value="YES"value="" > <!-- <table border="1"> <col width="50"> <col width="200"> <tr> <td><input type="button" name="no"value="NO"value="" ></td> <td><input type="text" name="file" size="40" value=""></td> </tr> </table> --> </body> </html>
- 締切済み
- JavaScript
- vb2005でwebbrowserに表示したテーブルタグの値を取得したい。
<head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> </head> <body> <table width="450" border="1"> <tr> <th scope="col"> </th> <th scope="col"> </th> </tr> <tr> <th scope="row"> </th> <td><table width="450" border="1"> <tr> <th scope="col"> </th> <th scope="col"> </th> </tr> <tr> <th scope="row"> </th> <td>【xyz】</td> </tr> </table></td> </tr> </table> </body> </html> このようなhtml文書があったとして、 【xyz】この値を取得したいのですが WebBrowser1.Navigate("上記のhtml文書のURL") Do While (WebBrowser1.IsBusy Or WebBrowser1.ReadyState <> WebBrowserReadyState.Complete) My.Application.DoEvents() System.Threading.Thread.Sleep(50) Loop からどのようにコーディングすれば取得できるんでしょうか？できるだけ文字列操作をするのではなくて、 用意された2.0のクラス群を利用して取得したいんです。教えてください。お願いします。
- ベストアンサー
- Visual Basic
- 表の作成
いつもお世話になっています。 下記の構文で表を作成した際に、セルの幅がずれてしまいます。 <TABLE border="1" cellspacing="0" width="940"> <TBODY> <TR> <TH height="17" width="790" colspan="5">A</TH> <TH height="17" width="75" rowspan="2">G</TH> <TH height="17" width="75" rowspan="2">H</TH> </TR> <TR> <TH height="17" width="150">B</TH> <TH height="17" width="80" >C</TH> <TH height="17" width="220">D</TH> <TH height="17" width="280">E</TH> <TH height="17" width="60" >F</TH> </TR> </TBODY> </TABLE> <TABLE border="1" cellspacing="0" width="940"> <COLGROUP> <col width="150"> <col width="80" > <col width="220"> <col width="280"> <col width="60" > <col width="75" > <col width="75" > </COLGROUP> <TBODY> <TR height="30"> <TD><FONT SIZE="-1">○</FONT></TD> <TD><FONT SIZE="-1">×</FONT></TD> <TD><FONT SIZE="-1">△</FONT></TD> <TD><FONT SIZE="-1">□</FONT></TD> <TD><FONT SIZE="-1">◆</FONT></TD> <TD align="center"> <INPUT type="button" value="◎" style="width:55px;height:27px" onClick=""> <!-- ж --> </TD> <TD align="center"> <INPUT type="button" value="Δ" style="width:55px;height:27px" onClick=""> <!-- ☆ --> </TD> </TR> </TBODY> </TABLE> どなたか解決方法を教えていただけないでしょうか？ よろしくお願いいたします。
- ベストアンサー
- HTML
- 空のテーブルを表示させたい
DBから検索条件に当てはまるデータを全て読み込み、 特定の内容だけ表のように表示させるプログラムを作成しています。 ほとんど作成し終わったのですが、項目の中のデータが空だと表の枠(？)を表示してくれず、空白になってしまいます。 それでは見た目が悪いので、なんとかExcelのような表にしたいのですが、やり方がわかりません。 どなたか教えていただけないでしょうか？ ○開発環境 ・OS：WindowsXP Professional ・ツール：Microsoft InterDev6.0 ・DB：SQLServer2000 ○ソース（表示部分のみ） 該当データ数 <%=objRS.RecordCount%><br> <% Response.Write"<input type=""submit"" id = ""Indication1"" value=""表示する"" name=""Indication"">" %> <br> <table border="1" width="100%"> <tr> <th scope="col" bgcolor="#ccffff"></th> <th scope="col" bgcolor="#ccffff"><font size="2">入力番号</font></th> <th scope="col" bgcolor="#ccffff"><font size="2">日付</font></th> <th scope="col" bgcolor="#ccffff"><font size="2">名前</font></th> </tr> <% '***** 検索されたデータの表示 ***** Do Until ObjRS.EOF %> <tr> <td scope="col"> <% Response.Write"<input type=""radio"" value=""" & ObjRS("no")& """ name=""Check"">" %> </td> <td scope="col"><%=ObjRS("no")%></td> <td scope="col"><%=ObjRS("date")%></FONT></td> <td scope="col"><%=ObjRS("name")%></FONT></td> </tr> <% ObjRS.MoveNext LOOP %> </table>
- ベストアンサー
- Microsoft ASP
- 追加、削除について
以前、行の追加と削除で質問をした者です。 その時、innerHTMLでのやり方を教わりましたが appendChild、removeChildという、メソッドでも 同じことができるのか教えてもらいたいです。 追加ボタンを押すと左のNOが、3,4と下に増える 削除ボタンを押すと戻るというやり方です。 <sample.html> <html> <head> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=Shift_JIS"> <title>列追加、削除</title> </head> <body> <table border=1> <col width="150" align="center" style="font-weight:bold"><col span="3"> <tr> <th >No</th> <th >列1</th> <th >列2</th> <th >列3</th> </tr> <tr> <td>1</td> <td><input type="text" name="sankou" value="" size="26" ></td> <td><input type="text" name="sankou" value="" size="26" ></td> <td><input type="text" name="sankou" value="" size="26" ></td> </tr> <tr> <td>2</td> <td><input type="text" name="sankou" value="" size="26" ></td> <td><input type="text" name="sankou" value="" size="26" ></td> <td><input type="text" name="sankou" value="" size="26" ></td> </tr> </table> <table> <tr> <td ><input type="button" VALUE="追加"></td > <td ><input type="button" VALUE="削除"></td > </tr> </table> </body> </html>
- ベストアンサー
- JavaScript
- テーブルのテーブルの間に間ができるのでしょうか？
はじめまして、超html初心者のものです。 なぜ同じようテーブルを３つ書いているのに一番上のテーブルと真ん中のテーブルの間が開いてしまっているのかがわかりません。 あと、一番上のテーブルの-から先をもう少し左に寄せることもうまくいきません。 なにかアドバイスをよろしくお願いします。 ↓これがソースです。 <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> - </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>
- 締切済み
- HTML
- PHPでtableをループさせたい！
【急募！】PHPでMysqlから取り出した値をHTMLのtableで出力したい。 うまくいかなくて困ってます。 今回で2度目の質問となります。今回も急いでおります。 現在、プログラムの勉強をして半年近くになります。本日3/3までに作成を完了しなければならず困っております。 何日か掛けて調べたのですが、まだまだ勉強不足の為に理解が出来ませんでした。 ＰＨＰで作成をしております。データベースから取り出した値をHTMLで作成したtableに出力後、tableをデータベースに入っている数だけループさせたいです。※イメージ画像あり おそらくwhile分でループさせれば良いとういうのは理解できるのですが、テーブル自体を増やすやりかたかが解りません。 while(データーベースの値をループさせてひとつずつ出力する。,テーブルも同じ数出力する） 全部取り出したら break で抜ける......となると思うのですが、書き方か解りません。 mysql_fetch_arrayというものもあるようですがまだ理解ができません。 答え合わせになってしまうのが恐縮でございますが、答え合わせのコードを頂けましたら嬉しいです。 まだ理解が浅いため、質問の内容に理解が出来なければ、ご連絡を頂きましたら改善改良をします。 お恥ずかしいですが、ソースを乗せさせて頂きますので宜しくお願い致します。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link href="css/style2.css" rel="stylesheet" type="text/css"> <title>管理画面</title> </head> <body> <div id="main"> <?php $dsn='mysql:dbname=motorlinks;host=localhost'; $user='root'; $password=''; $dbh=new PDO($dsn,$user,$password); $dbh->query('SET NAMES utf8'); $sql='SELECT code,gazou,name,shiyo,price,shiharai,first,sample,comment FROM pone WHERE 1'; $stmt=$dbh->prepare($sql); $stmt->execute(); print'製品一覧<br><br>'; print'<form method="post"action="pone_branch.php">'; ?> <?php while(true) { $rec=$stmt->fetch(PDO::FETCH_ASSOC); if($rec==false) { break; } print $rec['gazou']; print $rec['name']; print $rec['shiyo']; print $rec['price'].'円'; print $rec['shiharai']; print $rec['first']; print $rec['sample']; print $rec['comment']; print'<br>'; }?> <table width="800" border="1" cellpadding="0"> <?php print'<input type="radio"name="ponecode"value="'.$rec['code'].'">'; ?> <tr> <th colspan="2" rowspan="4" scope="col"><?php '<img src="gazou/burank.jpg" width="200" height="150" alt=""/>'; ?></th> <th width="162" height="4" scope="col">Product Name</th> <th width="162" height="4" scope="col">Specification</th> <th width="162" height="4" scope="col">Price</th> <th width="162" height="4" scope="col">Payment</th> </tr> <tr> <td height="63"> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <th width="162" height="4" scope="col">First Order</th> <th width="162" height="4" scope="col">Sample</th> <th width="162" height="4" scope="col">Comment</th> <th width="162" height="4" scope="col">Contact</th> </tr> <tr> <td height=63"> </td> <td> </td> <td> </td> <td> </td> </tr> </table> <?php print'<br>'; print'<input type="submit" name="disp" value="参照">'; print'<input type="submit" name="add" value="追加">'; print'<input type="submit" name="edit" value="修正">'; print'<input type="submit" name="delete" value="削除">'; print'</form>'; ?> <br> <a href="index_mo.html">トップメニューへ</a><br> </form> </div> </body> </html>
- ベストアンサー
- PHP
- colspan を使用した際のIE7の動作
行き詰ってしまったのでこちらで質問させていただきます。 テーブルで表を作成しているのですが、 colspanで指定したセルの中にinputを入れると急にIE7でレイアウトが崩れます。 IEの他のverでは大丈夫なのですが、7だけくずれてしまうのは何か回避策があるのでしょうか？ ちなみに、下記のようなソースです。 全体で8列とり、１行目は項目３つに対してそれぞれinputを入れる列があり、 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
お礼
できました！ 理想のご回答ありがとうございます。 自分では到底考えられませんでした。 もっと勉強しなくてはいけませんね。 このボタンには他にも外部jabascriptを使っていたので 出来ればkaito()に付け足したかったのです。 kaito(\"$col[aaa]\",\"$col[bbb]\",this)と付け足したら うまく行きました。 具体的な回答を頂いて大変助かりました。 恩に着ます。 本当にありがとうございました。 又何かありましたら是非よろしくお願い致します。