重要なお知らせ

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

電子書籍の厳選無料作品が豊富！

チェックボックス付きのテーブルから、チェックの付いた行のみの値を取得したい

締切済

  • 質問者：ひつじmk2
  • 質問日時：
  • 回答数：2件

プログラム初心者です。

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

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

ちなみにこんな感じ



<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>
    • good
    • 1
    • 件
通報する

No.1

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

とりあえずtdのvalueではないのでinputから取得してください


$(row).children("td:nth-child(2)").val();
↓↓↓
$(row).children("td:nth-child(2)").find("input").val();

それと確認ボタンがへん
チェックボックスのvalueはスタティックに2でOK？
    • good
    • 0
    • 件
通報する

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

Q質問する（無料）

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

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

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

Q質問する（無料）

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

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

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

おすすめ情報