プログラム初心者です。
jsp+jQueryにてチェックボックス付きのテーブルから、チェックの付いた行のみの値を取得したいのですが値が取得できず困っています。
どなたかお力を貸していただけないでしょうか?
------------------------
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></sc …
<script type="text/javascript">
function getTableRecords(){
var chkRow=$("input[name=Target]:checked").parents("tr");
if (chkRow.length == 0){
alert('選択してください');return;
}
var val1=[];
var val2=[];
var val3=[];
for(i=0;i<chkRow.length;i++){
var row=chkRow[i];
val1[i]=$(row).children("td:nth-child(2)").val();
val2[i]=$(row).children("td:nth-child(3)").val();
val3[i]=$(row).children("td:nth-child(4)").val();
alert(val1[i]+','+val2[i]+','+val3[i]);
}
}
</script>
</head>
<body>
<form name="form1">
<TABLE border="1" width="100%">
<tr><th>チェック</th><th>項目1</th><th>項目2</th><th>項目3</th></tr>
<% for(int i=1; i<=10; i++){ %>
<tr>
<td><input type="checkbox" name="Target" value="2"></td>
<td><input type="text" name="val1"></td>
<td><input type="text" name="val2"></td>
<td><input type="text" name="val3"></td>
</tr>
<% } %>
</TABLE>
<INPUT type="button" onclick="getTableRecords()">確認</button>
</form>
</body>
------------------------
・やりたいこと
チェックボックス付きのテーブルから、チェックの付いた行のみの値を取得したい
- テーブルは「チェックボックス、項目1、項目2、項目3」の4列10行
- 項目1~3はテキストボックス
・困っていること
確認ボタンを押したときにjsのgetTableRecords()を呼び出し、チェックが付いた行の項目1~3の内容を表示したいが、値が取得できない。
よろしくお願いいたします。
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
ちなみにこんな感じ
<script>
$(function(){
$('#kakunin').click(function(e){
$("input[name=Target]:checked").each(function(){
var str="";
var l=[2,3,4];
while(i=l.shift()){
if(str!=='') str+=",";
str+=$(this).parents('tr').children('td:nth-child('+i+')').children('input').val();
};
console.log(str);
});
e.preventDefault();//submitを止める
});
});
</script>
</head>
<body>
<form name="form1">
<TABLE border="1" width="100%">
<tr><th>チェック</th><th>項目1</th><th>項目2</th><th>項目3</th></tr>
<tr>
<td><input type="checkbox" name="Target"></td>
<td><input type="text" name="val1" value="100"></td>
<td><input type="text" name="val2" value="110"></td>
<td><input type="text" name="val3" value="120"></td>
</tr>
<tr>
<td><input type="checkbox" name="Target"></td>
<td><input type="text" name="val1" value="200"></td>
<td><input type="text" name="val2" value="210"></td>
<td><input type="text" name="val3" value="220"></td>
</tr>
<tr>
<td><input type="checkbox" name="Target"></td>
<td><input type="text" name="val1" value="300"></td>
<td><input type="text" name="val2" value="310"></td>
<td><input type="text" name="val3" value="320"></td>
</tr>
</TABLE>
<button id="kakunin">確認</button>
</form>
No.1
- 回答日時:
とりあえずtdのvalueではないのでinputから取得してください
$(row).children("td:nth-child(2)").val();
↓↓↓
$(row).children("td:nth-child(2)").find("input").val();
それと確認ボタンがへん
チェックボックスのvalueはスタティックに2でOK?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- JavaScript javascript作成してます。ラジオボタンで判定するコードを書いてます。 1 2023/07/18 11:03
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
- JavaScript javascriptでテーブルに追加した項目のid追加してローカルストレージを操作したい 5 2023/01/01 15:52
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript javascriptのちょっとした動作不良(原因は突き止めたのですが) 1 2023/06/15 19:58
- JavaScript Javascript初心者|jQueryの.val()で値を取得し複数の要素を連結させる方法知りたい 2 2022/06/02 12:06
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript 追加ボタンを押した際に ok ボタンを押した場合のみ入力値が追記されるようにしたいです 6 2022/05/29 09:57
このQ&Aを見た人はこんなQ&Aも見ています
-
プロが教える店舗&オフィスのセキュリティ対策術
中・小規模の店舗やオフィスのセキュリティセキュリティ対策について、プロにどう対策すべきか 何を注意すべきかを教えていただきました!
-
テーブル内のチェックボックスのvalue受け渡し
JavaScript
-
テーブルの任意の列を非表示にしたい
HTML・CSS
-
一覧から選択した行の行番号を取得について
JavaScript
-
-
4
htmlでテーブル内にテキストボックスを作りたいのですが・・・
HTML・CSS
-
5
文字列が入っているtdを削除せず非表示にしたい
HTML・CSS
-
6
テーブル行のクリックでチェックボックスの制御
JavaScript
-
7
JSPで<SELECT>の中にDBから持ってきたデータを反映させたい
Java
-
8
「value」に2つの値をセットする方法
HTML・CSS
-
9
同じIDで定義した要素の配列を取得したいが
JavaScript
-
10
フォーム上で押されたボタンによってサーブレットの処理を変えたい
Java
-
11
tableタグとformタグの組み合わせ
HTML・CSS
-
12
SQLで特定の項目の重複のみを排除した全項目を取得する方法
その他(プログラミング・Web制作)
-
13
<input type=hidden" >で配列(複数の要素)を渡したいとき?"
PHP
-
14
チェックボックスの返す値
CGI
-
15
チェックボックスのON/OFFでValueの値を変える方法が分かりません。
JavaScript
-
16
ボタンをセル内一杯に表示させる方法はありませんか?
HTML・CSS
-
17
checkboxでの複数選択削除がわかりません
PHP
-
18
javascriptでtableの該当行を削除ボタン
JavaScript
-
19
チェックボックスにチェックがはいるとテーブルのセル背景色が変更する
JavaScript
-
20
Javascriptの値をJava(JSP)へ渡す方法
Java
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
JavaScriptの「.querySelectorA...
-
テーブル内のチェックボックス...
-
jQuery テキストボックス読み取...
-
ラジオボタンが選択されたらテ...
-
画面の2重起動をチェックする...
-
ラジオボタン選択でtextfieldを...
-
追加したテキストボックスとテ...
-
jQueryでテーブル行の表示・非表示
-
Javascriptで自動計算の合計の...
-
localStorageでのcheckbox制御
-
プルダウン 項目が多いので先頭...
-
<input>の選択肢をプルダウンメ...
-
TextBoxに半角数字以外を入れた...
-
【jQuery】input nameの文字列...
-
value内に変数を入れたい
-
二つの入力欄に、同時に同じ文...
-
return trueとreturn falseの用...
-
チェックボックスのON/OFFでVal...
-
JavaScriptにて動的に配列を作...
-
正規表現で複数マッチ条件で悩...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
チェックボックス付きのテーブ...
-
画面表示とともにtableの指定の...
-
JavaScriptの「.querySelectorA...
-
Javascriptの電卓で最初の何も...
-
localStorageでのcheckbox制御
-
文字数を数える際に空白、改行...
-
テーブル内のチェックボックス...
-
クリックしたラジオボタンの行...
-
複数のselect値で1つも選択され...
-
jQueryで合計を出したい
-
送信ボタン連打を抑止したいです
-
ラジオボタンが選択されたらテ...
-
ラジオボタンを一括で操作する...
-
formで項目を連結したい
-
javascriptで表(テーブル)の自...
-
同一nameの input type="text"...
-
動的に生成されるラジオボタン...
-
ボタンクリックでフォーカス移動
-
JavaScriptによる自動計算フォーム
-
選択したテーブルのセルの背景...
おすすめ情報