jQueryでinput要素を取得する方法

このQ&Aのポイント
  • jQueryを使用してテーブルのinput要素を取得する方法について教えてください。
  • 上記のテーブルのソースコードを見ると、各行のinput要素を取得し、配列に格納したいとのことです。
  • 現在のコードでは、テーブルの各行のinput要素の値が取得できず、問題が発生しています。
回答を見る
  • ベストアンサー

jquery input 要素取得

失礼します。現在テーブルに記載されているテキストとinputの要素を取得して配列に格納したいのですが、input要素を取得できません ソースコードはこちらです。ご教授いただけますでしょうか。宜しくお願い致します。 <table id="tbl"> <tr> <td>fdfasdf</td> <td>hfadhfh</td> <td><input type="number" name="number" min='0' max="30" value=""></td> </tr> <tr> <td>hfdaha</td> <td>hfdsahsa</td> <td><input type="number" name="number" min='0' max="30" value=""></td> </tr> </tbody> </table> <script> var data = []; var tr = $("table tr");//全行を取得 for(var i=0, l=tr.length; i<l;i++ ){ //行数分回す var nk = 0; var cells = tr.eq(i).children();//1行目のtrの子要素は取得 for(var j=0, m=cells.length; j < m; j++ ){ //子要素分のcell分回す 0 < cell if(typeof data[i] == "undefined"){ //typeof(型判定) data[i] = []; //data[0] } if(nk < 2){ data[i][j] = cells.eq(j).text();//i行目j列の文字列を取得 data[0][0] ++nk; } data[i][j] = cells.eq(j).val(); } } </script>

質問者が選んだベストアンサー

  • ベストアンサー
  • t_ohta
  • ベストアンサー率38% (5085/13288)
回答No.1

どういう結果を理想とされているかイマイチ判らないのですが、こんな感じのイメージでしょうか。 ========== var data = []; $("table tr").each(function(){ var subData = []; $(this).children().each(function(){ if ($(this).children('input').length) { subData.push($(this).children('input').val()); } else { subData.push($(this).text()); } }); data.push(subData); });

losloson
質問者

お礼

まさに理想としていた内容です。 ありがとうございます。

関連するQ&A

  • JQuery インプット要素 カウント減算について

    お世話になります。 JQueryを使用してインプット要素を追加・削除できるようにするアプリケーションを作成してます。 問題は、インプット要素の数を追加した合計数量を取得し削除をした場合、うまくいかない事です。 下記はコードです。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../library/js/jquery-1.6.js"></script> <link rel="stylesheet" href="../library/css/defult.css"> <link rel="stylesheet" href="../library/css/style.css"> <title>メールアドレス登録</title> <script type="text/javascript"> <!-- $(document).ready(function(){ $(function() { var count; var scntDiv = $('tbody.row'); var i = $('#row').size() + 2; $('#addScnt').live('click', function() { $('<tr><td><input type="text" style="width: 320px;" name="emailAddress_' + i +'" /></td><td><a href="#" id="addScnt">Add</a></td><td><a href="#" id="remScnt">Remove</a></td></tr>').appendTo(scntDiv); count = i++; document.getElementById('cnt').value=count; return false; }); $('#remScnt').live('click', function() { if( i > 2 ) { $(this).parents('p').remove(); count = i--; document.getElementById('cnt').value=count; } return false; }); }); }); --> </script> </head> <body> <div id="content"> <h1>メールアドレス登録</h1> <form id="multi"> <table> <tbody class="row"> <tr> <td><input type="text" style="width: 320px;" name="emailAddress_1" /></td> <td><a href="#" id="addScnt">Add</a></td> </tr> </tbody> </table> <input type="hidden" name="cnt" id="cnt" /> <div id="process"> <input type="submit" class="processing" name="submit" value="次へ"/> </div> </form> </div> </body> </html>

  • jquery・特定要素の選択について

    jqueryを独学で色々と勉強しているのですが、すこし疑問があるので教えてください。 以下の様なソースで1つ目のTD要素内のINPUT(チェックボックス1・3)をチェックした際に、3つ目のTD要素内のINPUTを無効にしたいと考えています。 <table> <tr> <td><input type="checkbox">チェックボックス1</td> <td>hoge</td> <td><input type="checkbox">チェックボックス2</td> <tr> <tr> <td><input type="checkbox">チェックボックス3</td> <td>hoge</td> <td><input type="checkbox">チェックボックス4</td> <tr> </table> 私が書いたスクリプトは以下です。 $('td:first-child :checkbox').click(function(){  $( this ).parents().children('td:last-child').children('input').attr('disabled','disabled'); }); ・・一応これで正常に動くのですが、どうも書き方に無駄があるような気がします。 もっとスマートな方法があればアドバイスいただけないでしょうか? よろしくお願い致します。

  • jQueryで合計を出したい

    <table> <tr> <td class="point"><input type="text"></td> <td class="point"><input type="text"></td> <td class="point"><input type="text"></td> <td class="point"><input type="text"></td> </tr> </table> とHTMLで記述していて、jQueryを下記のように記述しました。 var total; j$(".point:text").change(function(){ j$(".point:text").each(function(){ var point = j$(this).val(); total = parseInt(point)+total; }); alert(total); }); alertで返ってくる結果が「NaN」となります。 どのようにすれば合計値が求められるでしょうか。 やりたいことは「pointクラス」内のテキストフォームの値を合計したいです。

  • 指定した要素を含んだテキストで取得する

    <table>  <tr id="aaa"><td>あああ</td></tr>  <tr><td>いいい</td></tr> </table> <script> alert(document.getElementById("aaa").innerHTML) </script> 上記のようなHTMLを実行すると 「<td>あああ</td>」と表示されますが これをid指定されている<tr>要素を含んだ形で 即ち「<tr id="aaa"><td>あああ</td></tr>」というように 取得するにはどのような方法が考えられるでしょうか?

  • jQueryで最後の1文字を消したい

    tableのtd要素内のテキストの最後の文字をjQueryで消したいのですが、うまくいきません。 どのようにしたらよいでしょうか? 【HTML】 <table> <tr><td>あああ</td><td class="iii">いいいい</td></tr> </table> 【JavaScript】 var str = $('.iii').text(); var str2 = str.slice(0, -1); $('.iii').text(str2);

  • Table内TDの子要素を移動させたいのですが・・

    初心者的な質問になるかもしれませんが、宜しくお願いします。 唐突ですが、こんなTable付きのHTMLがあります(ちょっと省略してます)。 <DIV>.....</DIV> ← (*) <Table> <TR> <TD>  ← (1) <SCRIPT ........</SCRIPT> <A HREF="">........</A> <LI> <DIV class ..... </DIV> <DIV class ..... </DIV> <DIV class ..... </DIV> <LI> </TD> <TD>  ← (2) <LI> <DIV class ..... </DIV> <DIV class ..... </DIV> <DIV class ..... </DIV> <LI> </TD> <TD>  ← (3) <LI> <DIV class ..... </DIV> <DIV class ..... </DIV> <DIV class ..... </DIV> <LI> </TD> </TABLE> (1)は複数の子要素があり、(2)と(3)はLI要素(ただし、その中に複数要素がある)です。 この(1)~(3)のTDの子要素部分だけを抽出し、(*)の DIVタグの真下に移動させるようなjquery文を作りたいのですが、 http://d.hatena.ne.jp/replication/20120113/1326382090 等の記事を参考に、 var cells, tblcell; // テーブルタグを探して、1番目のテーブルを取得する var rows = $("table")[0].rows; // 列を1つずつ取り出す $.each(rows, function(i) { cells = rows[i].cells; // 行を1つずつ取り出す $.each(cells, function() { // tdタグの値を書き換える tblcell = $(this).detach(); console.log(tblcell); // tdタグのスタイルシートを書き換える $('div').after(tblcell); }); }); このやり方だとrowの性質上、DIVの下へTD付きでそのまま来てしまいます。 そうではなく、TD直下のHTMLだけをそのままDIVの直下へつなげるように放り込みたいのですが、 中々うまいやり方がみつかりません・・・ なにか、よい方法はございませんでしょうか?

  • javascriptでselectボックスの<OPTION>要素数の取

    javascriptでselectボックスの<OPTION>要素数の取得する方法について疑問があります。 データが1件の場合、複数件の場合とで分けて、 <OPTION>要素数を取得する処理を記述していますが、 データが1件の場合、 document.getElementsByName("sel").length で正しい値が取得できません。 詳しくは下記のソースを参照していただきたいのですが、 (1)、(2)、(4)は、正しい値'5'ですが、 (3)だけ誤った値'1'になります。 これはなぜでしょうか? javascript初心者のため、初歩的な質問かもしれませんが、 教えていただけたら嬉しいです。 よろしくお願い致します。 -------------------------------------- <HTML> <HEAD> <SCRIPT language="JavaScript">   function getSelLen(){ var oForm = document.form1; var sObj; var sObj2; //チェックボックスの数でデータが複数件か1件か判別しています。 if(oForm.chk.length){ //データが複数件の場合 for ( var i = 0; i < oForm.chk.length; i++ ) { sObj=document.getElementsByName("sel")[i]; alert("(1) "+ sObj.length); //・・・・(1) 正 sObj2=oForm.elements["sel"][i]; alert("(2) "+ sObj2.length); //・・・・(2) 正 } }else{ //データが1件の場合 sObj=document.getElementsByName("sel"); alert("(3) "+ sObj.length); //・・・・(3) 誤 sObj2=oForm.elements["sel"]; alert("(4) "+ sObj2.length); //・・・・(4) 正 } } </SCRIPT> </HEAD> <BODY> <FORM name="form1"> <TABLE> <TR> <TD> <INPUT type="checkbox" name="chk" > </TD> <TD> <SELECT name="sel" > <OPTION value="" selected> <OPTION value="00">00 <OPTION value="01">01 <OPTION value="02">02 <OPTION value="03">03 </TD> </TR> <!-- 複数件の場合 以下のコメントアウトを解除する --> <!-- <TR> <TD> <INPUT type="checkbox" name="chk" > </TD> <TD> <SELECT name="sel" > <OPTION value="" selected> <OPTION value="00">00 <OPTION value="01">01 <OPTION value="02">02 <OPTION value="03">03 </TD> </TR> --> </TABLE> </FORM> <FORM name="form2"> <INPUT type="button" onClick="getSelLen()" value=" selectの要素数 "> </FORM> </BODY> </HTML>

  • JQueryでクリックされた文字を取得したい

    テーブルがあり、連番が 1 2 3 と振ってあります。 その文字情報をJQueryで取得するにはどのように記述すれば良いのでしょうか? 例)1をクリック → 1 を取得。 <table border="1" width="150"> <tbody> <tr> <td width="50"><a href="#">1</a></td> <td>田中</td> </tr> <tr> <td><a href="#">2</a></td> <td>佐藤</td> </tr> <tr> <td><a href="#">3</a></td> <td>鈴木</td> </tr> </tbody> </table> ご存知の方教えて下さい。

  • 動的なcheckboxのcheckedについて

    動的にcgiから名簿tableを作り先頭にcheckboxを配置しています。 (□、コード、氏名) そのコードNo.取得し内容によってループ内でcheckboxをif文でオンオフしたいのですがコードNo.(rec[0])の取得方法がわかりません。できるはずとは思うのですが私の力不足で・・・。よろしくお願いします。 var recs = xhrObj.responseText.split("<r>"); var status2 = "<table id='meibo' ><tbody><tr>" +"<th width='20'><th width='40'>No.</th><th width='120'>氏名</th>" +"</tr>"; for(var i = 1; i < recs.length - 1; i++){ rec = recs[i].split("<i>"); status2 += "<tr><td><input type='checkbox' name='checkbox' id='"+i+"' /></td>"; status2 += "<td id='"+i+"' />"+rec[0]+"</td><td id='"+i+"' />"+rec[1]+"</td>"; status2 += "</tr>"; } status2 += "</tbody></table>"; document.getElementById("status2").innerHTML = status2; var observer = document.getElementById("meibo"); setListener(observer, "click", check);

  • INPUT BOX テキスト範囲

    <table> <tr> <td>名前:</td> <td><input type=text name="NAMAE"></td> </tr> <tr> <td>住所:</td> <td><input type=password name="jusho"></td> </tr> </table> 例えば、このようなタグがありまして、 表示すると、名前・・・       住所・・・ とあり、その後の空欄(テキスト)も表示されますが、 範囲も指定できませんか?

    • ベストアンサー
    • HTML