急いでいます！

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

解決済

質問者：mbc525
質問日時：2016/01/28 11:33
回答数：3件

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

// html php
<table class="table-click" >
<thead>
</thad>
<tbody>

<?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のままです。
初歩的な考え方を間違えているのでしょうが、思いつきません。
すみませんが、ご指摘よろしくお願いいたします。

通報する

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

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： yambejp
回答日時：2016/01/28 13:49

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

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

＞var id = $('.id').val();
var id = $(this).find('.id').val();
としてみれば？

- 0
- 件

通報する

この回答へのお礼

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

通報する

お礼日時：2016/01/28 13:59

No.2

回答者： fujillin
回答日時：2016/01/28 13:26

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

わざわざ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>

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