質問させていただきます。
// 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のままです。
初歩的な考え方を間違えているのでしょうが、思いつきません。
すみませんが、ご指摘よろしくお願いいたします。
No.2
- 回答日時:
すでに指摘に出ていますが、文法がおかしいですよね?
わざわざ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>
※ ご質問とは直接関係ありませんが、このような方法をとることで、動的に行が追加・削除されたりするような場合でも、問題なく動作することが可能になります。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- PHP htmlで複数の個数入力欄を表示させるには 1 2022/09/20 03:11
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- JavaScript 追加ボタンを押した際に ok ボタンを押した場合のみ入力値が追記されるようにしたいです 6 2022/05/29 09:57
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- HTML・CSS 【CSS】:hasで可能? imgを含むtr要素を選択したい 1 2022/11/17 14:36
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
このQ&Aを見た人はこんなQ&Aも見ています
-
プロが教える店舗&オフィスのセキュリティ対策術
中・小規模の店舗やオフィスのセキュリティセキュリティ対策について、プロにどう対策すべきか 何を注意すべきかを教えていただきました!
-
至急!GetElementById でtdのidの値を取得、サブウインドに取得したデータを表示
JavaScript
-
テーブルの任意の列を非表示にしたい
HTML・CSS
-
クリックされたセルの位置を取得するには?
JavaScript
-
-
4
HTML:Tableタグに対し、JavaScriptで動的にイベントを
JavaScript
-
5
文字列が入っているtdを削除せず非表示にしたい
HTML・CSS
-
6
チェックボックス付きのテーブルから、チェックの付いた行のみの値を取得したい
JavaScript
関連するカテゴリからQ&Aを探す
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<JavaScript>tableタグを入力不...
-
ホームページの特定の表の背景...
-
画面表示とともに、テーブルの...
-
テーブルの行数を可変長にした...
-
テキストエリアに入力した改行...
-
プルダウンメニューを表の中に...
-
javascriptでクリックするごと...
-
javascriptで画像をテーブルに...
-
どこに挿入?
-
javascriptで<table>背景色の取得
-
javascriptでスロットマシン
-
スワップイメージ+リンクの変更
-
テーブルのセルのクリック時、...
-
マウスが重なったら画像の上に...
-
tbody要素のinnerHTMLが書き換...
-
CSVファイルから画像名を取得し...
-
return trueとreturn falseの用...
-
プルダウン 項目が多いので先頭...
-
onchangeイベントを強制的に発...
-
Googleモバイル検索の検索結果...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<JavaScript>tableタグを入力不...
-
テーブルの行数を可変長にした...
-
画面表示とともに、テーブルの...
-
selectのonChangeが動作しません
-
【jQuery】tableループ内のIDの...
-
javascriptで画像をテーブルに...
-
Tableの枠線(内・外)色を変更
-
テキストエリアに入力した改行...
-
クリックごとに文字色が交互に...
-
javascript でテーブル操作
-
JQueryでテーブルの行を追加し...
-
javascriptで<table>背景色の取得
-
idの振り直しについて
-
テーブルのセルのクリック時、...
-
<iframe>内にHTMLをランダム表...
-
javascriptでスロットマシン
-
プルダウンメニューを表の中に...
-
連動テーブルのクロスハイライト
-
簡単なJavaスロットマシーンに...
-
jquery にて、アラートダイアロ...
おすすめ情報