重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

【解消】通知が届かない不具合について

急いでいます！

【jQuery】tableループ内のIDの値を取得したい。

解決済

  • 質問者：mbc525
  • 質問日時：
  • 回答数：3件

質問させていただきます。

// html php
<table class="table-click" >
<thead>
</thad>
<tbody>
<!-- $iをIDとする -->
<?php for($i = 0; $i < 10; $i++): ?>
<?php echo '<input type="hidden" class="id" name="id" value="' . $i . '">'?>
<tr>
<td>
<?php echo 'テスト' . $i; ?>
</td>
</tr>
<?php endfor; ?>
</tbody>
</table>

// jQuery
$(function(){
$('.table-click tr').click(function(){
var id = $('.id').val();
alert(id);
});
});

テーブルの各trをクリックすることでhiddenのid番号をアラートで出力したいのですが、
(0行目のtrをクリックすれば0, 1行目のtrをクリックすれば1と表示したい)

現状どのtrをクリックしたも0のままです。
初歩的な考え方を間違えているのでしょうが、思いつきません。
すみませんが、ご指摘よろしくお願いいたします。

通報する

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

質問の本文を隠す

A 回答 (3件)

No.3ベストアンサー

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

>管理まで質問したつもりはありませんので、批判は結構です。



別に批判したつもりはないが、まぁあとで苦労するのは自分なのでこれ以上なにもいうまい。

＞var id = $('.id').val();
var id = $(this).find('.id').val();
としてみれば？
    • good
    • 0
    • 件
通報する
この回答へのお礼

そうですね。苦労するのは自分なので、肝に銘じます。
端的にご教授いただいてありがとうございました。解決しました。

通報する
お礼日時：2016/01/28 13:59

No.2

  • 回答者： fujillin
  • 回答日時：

すでに指摘に出ていますが、文法がおかしいですよね？



わざわざhiddenにしているinput要素の意味がわかりませんが、もしも、idを取得するためだけに設けているのであるのならナンセンスです。（文書上は、まったく必然性のない要素ですし）
どうしてもidを振りたければ、（ご質問のケースでは）tr要素に設定するのが妥当ではないでしょうか。

idを取得した後に、どのような処理を予定なさっているのか不明ですが、本当にidがないと処理できないものでしょうか？
大抵のイベント処理は個々の要素のidなどは必要とせずとも処理が可能なものが多いように思います。
とは言っても、必要となる場合もあるでしょうが、そのためだけに「順序を示すようなid」を振っていらっしゃるのだとしら、これもまた必要無さそうに感じます。
（ついでながら、数字から始まるidも文法上はNGだったような・・・（←未確認です））

どうしても順番が必要なら数えれば良いので、（勝手な想像ですが）対象となる表さえ特定できていれば良さそうに思えます。
また、その方が、HTMLもシンプルで分かり易くなるのではないでしょうか。

以下、table要素だけにidを設けて、同様のことを行う例です。
<!DOCTYPE HTML>
<html lang="ja">
<head><title>test</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery","1");</script>
</head>
<body>

<table id="test" border=1>
<tr><td>hogehoge</td></tr>
<tr><td>hogehoge</td></tr>
<tr><td>hogehoge</td></tr>
<tr><td>hogehoge</td></tr>
<tr><td>hogehoge</td></tr>
</table>

<script type="text/javascript">
$("#test").on("click", "td", function(){
alert($("#test tr").index($(this.parentNode)));
});
</script>
</body>
</html>

※ ご質問とは直接関係ありませんが、このような方法をとることで、動的に行が追加・削除されたりするような場合でも、問題なく動作することが可能になります。
    • good
    • 0
    • 件
通報する
この回答へのお礼

たくさんのケースを考えていただき、詳しい解説ありがとうございました。
文法等も参考になりました。

通報する
お礼日時：2016/01/28 14:02

No.1

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

inputタグがtrの外側に設置されているので文法違反では？


すくなくともtrをクリックしても中に存在しないのですから値は返せないでしょう

またclassやnameに「id」という名称をつけて管理するのはナンセンスな気がします
もっとわかりやすい名前を付けた方がいいでしょう
    • good
    • 0
    • 件
通報する
この回答へのお礼

例として誰が見ても判断できる記述にしたのですが、、、
おっしゃる通りにtr内に記述をしましたが、結果は同じです。
管理まで質問したつもりはありませんので、批判は結構です。

通報する
お礼日時：2016/01/28 13:15

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

Q質問する（無料）

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

Q質問する（無料）

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

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

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

おすすめ情報