アプリ版：「スタンプのみでお礼する」機能のリリースについて

JavaScriptでテーブルをクリックするとPOST送信させる処理について

解決済

  • 質問者：merus
  • 質問日時：
  • 回答数：6件

テーブルに表示されている値をマウスを利用して取得したいと
考えております。
質問箱及びいろいろ検索してみたのですが、いま一つ理解できません
でしたので、お力添えの方宜しくお願い致します。

今回お教え願いたい処理と致しましては、単純にHTML内のBodyタグ内に
記述されている<td>テスト</td>の値をマウスでクリックすると取得
するというものです。

この処理に関しまして、検索すると多くのサイト、書籍が見つかり、
手法なども記述されていましたが、具体的な利用方法が見つけられず、
困っております。

参考サイトへの誘導も大歓迎ですので、宜しくお願いします。

備考：この処理の解決方法に
>>　tdに付けたイベントハンドラからXMLHttpRequestを呼ぶだけ。
引用サイト：「JavaScriptを教えてもらう」
というものがあったのですが、この利用方法が理解できませんでした。

大変お手数とは思いますが、利用方法をお教え願えれば幸いです。
何卒、宜しくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (6件)

No.1ベストアンサー

一番簡単なのはクリックするtdにonClickを埋め込む


XMLHttpRequestを呼ぶfunctionを仮に「sample」として

<td onClick="sample(this)">テスト</td>

そうでないなら何かしらの方法でそのタグをクリックしたと検知する方法が必要になる。
DOMで埋め込むか、最初から上記のように明記しておくかの違いしか無いと思う。
ただし上記だとブラウザによってはtdの枠しか反応しない場合もあるので試験して挙動がおかしく感じたらdivでくくる等してくくった物にonClickを設定する方が良いかもしれない。
    • good
    • 0
    • 件
通報する
この回答へのお礼

素早い回答、大変感謝致します。
早速試させていただき、マウスでテーブル内の値をクリックしますと
確かにonClickイベントが動作し、処理がsampleイベントハンドラへと
流れていました。

しかしながら、テーブル内の値である
　　<td onClick="sample(this)">テスト</td>
の "テスト" という値の取得方法が分かりませんでした。

alertを使い中身を表示させて確認したいのですが、
alert(document.フォーム名.elements.value);
alert(document.フォーム名.value);
等では値が取得できず、
alert(this);
alert(this.value);
にするとオブジェクトの種類を引数として取ってきてしまっています。


頂いた回答を生かせず申し訳なく思います。
宜しければ、値を変数に代入する方法もお教え願えませんでしょうか？

おんぶに抱っこ状態で大変失礼かと思いますが、宜しくお願いします。

通報する
お礼日時：2007/06/26 13:50

No.6

  • 回答者： yambejp
  • 回答日時：

#3です



<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html;charset=UTF-8">
<script type="text/javascript">
<!--
function sample(obj){
alert(obj.innerHTML);
}
//-->
</script>
</HEAD>
<BODY>
<form name = "form">
<table border = "1">
<tr>
<td onClick="sample(this)">テスト</td>
</tr>
</table>
</form>
</BODY>
</HTML>

ですね。

sample(this)としたときに渡されるthisはtdタグのことです。
それはわかりますか？それを引数としてわたしているのですから
適当な名前（ここではobj）として受け取らないといけません。

function sample(){
alert(this.innerHTML);
}
における、thisはsample()関数自身のことをさしていますので
ちょっとまとはずれになります。
    • good
    • 0
    • 件
通報する
この回答へのお礼

度々のご回答、有難う御座います。

thisの違いをお教え頂いてから、調べて居りましたところ
yambejp様の様なプログラムを作成し、取り出す所までは
たどり着けました。

しかし、ぼんやりとしたイメージで利用＆thisの利便性を
勉強しているうちに自分のしたいプログラム（テーブルから値の参照）
の意味が途轍もなく難しく感じてしまい、混乱しておりました。

分かりやすい解説を頂き、もう少し柔軟に考えることを覚える
いい機会だとお教え頂きました。
これから時間を掛け、オブジェクト指向の面白さ、便利さ、難しさ等
勉強をしていきたいと思います。

お付き合い頂き有難う御座いました。

通報する
お礼日時：2007/06/29 10:15

No.5

  • 回答者： 2007May
  • 回答日時：

>function sample(){


>　　alert(this.innerHTML);
>}

ここで書いているthisと

><td onClick="sample(this)">テスト</td>

ここでのthisが違う事に気付かない？

この回答への補足

アドバイスを頂き、有難う御座います。

申し訳ありません。
全く気付く事が出来ませんでした。

<td onClick="sample(this)">テスト</td>
のthisをsample関数の引数として取得できるものと思っており
まったく同一のモノとして捉えておりました。

恥ずかしながら、別モノとお教え頂いたのにも関わらず
どう変化しているのかも分りかねて居ります。

明日以降、時間を掛け理解に努めたいと思い
補足欄での記入とさせて頂きました。

今回のアドバイスを生かせるよう努力をし、利用できるようになれば
改めてお礼を投稿させて頂きたいと思います。

補足日時：2007/06/28 19:16
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

改めましてお礼申し上げます。

thisの用法を調べているうちに、何となくですがご指摘頂いた
意味が分かりかけて参りました。

使い方次第でとても便利に使えるものだということも学習できました。
使いこなせるようになるまでには、まだまだ時間がかかるかと
思いますがプログラムを勉強する上で、適切に御導き頂き、
今後の自分にも生かせていきたいと感じました。

お付き合い頂き、誠に有難う御座いました。
今後とも、ご機会があれば宜しくお願い致します。

通報する
お礼日時：2007/06/29 10:07

No.4

>オブジェクトの種類を引数として取ってきてしまっています


http://www.tohoho-web.com/js/dom.htm#childNodes
オブジェクトなのだから単純にalertで表示したらstring変換によって型名が表示されるのは致し方ないと思う
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご指摘有難う御座います。
仰る通りだと思います。

参考サイトへの誘導、感謝致します。
他回答者様のアドバイスも含め、試行錯誤しておりますが、
現段階で良い返事をお返しすることが出来ず、申し訳ありません。

有名なサイト様への誘導、的確な参照場所を用意して下さったにも
かかわらず、技術力の無さで生かせないのが悔しくてなりません。

時間をかけて利用させて頂こうと思います。
一刻も早く良い返事をお聞かせ出来るよう、頑張りたいと思います。

通報する
お礼日時：2007/06/27 10:44

No.3

  • 回答者： yambejp
  • 回答日時：

>　<td onClick="sample(this)">テスト</td>


>の "テスト" という値の取得方法が分かりませんでした。

this.innerHTMLで参照できませんか？

この回答への補足

値を取得するのみのソースなのですが、

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html;charset=UTF-8">
<script type="text/javascript">
<!--
function sample(){
alert(this.innerHTML);
}
//-->
</script>
</HEAD>
<BODY>
<form name = "form">
<table border = "1">
<tr>
<td onClick="sample(this)">テスト</td>
</tr>
</table>
</form>
</BODY>
</HTML>

上記のプログラムで取得できるのでしょうか？
このプログラムですと　undefine となってしまい、値を取得すること
ができません。

ご迷惑でなければ、お力添えを頂けないでしょうか？

補足日時：2007/06/27 15:19
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答有難う御座います。

私の技術・理解が足りないがために　this.innerHTML　では参照する
ことができませんでした。

折角のアドバイスを生かせず申し訳なく思います。

通報する
お礼日時：2007/06/27 10:37

No.2

  • 回答者： haraga
  • 回答日時：

リンクだけですがこちらで



参考URL：http://oshiete.nikkeibp.co.jp/kotaeru.php3?qid=2 …
    • good
    • 0
    • 件
通報する
この回答へのお礼

参考サイトへの誘導有難う御座いました！！
参考にさせて頂きます。

現質問よりもワンステップ上の事も書いていたので、今後に役立てたく
思います。

貴重なお時間を頂き、感謝するばかりです。

通報する
お礼日時：2007/06/27 09:27

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

このQ&Aを見た人はこんなQ&Aも見ています

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

このQ&Aを見た人がよく見るQ&A

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報