jQueryがダイナミックに作成されたテーブル/セルのcheckBox値を見つけられない

ボタンをクリックしたときに、動的に作成されたテーブルから「CheckBox」（0,1,2）の値を検索しようとしています。 checkBoxはテーブルの各行の最後のセルにあります。 jQueryは、checkBoxがクリックされたときに私に「値」を与えません。ここに私のコードです：jQueryがダイナミックに作成されたテーブル/セルのcheckBox値を見つけられない

<body> 

<table id="DataTable" 
style="position:absolute;left:348px;top:80px;width:350px;height:10px;z- 
index:7;text-align:center;"></table> 

<input type="submit" id="Button4" name="Clk_In" value="Create Table" 
style="position:absolute;left:495px;top:250px;width:96px;height:35px;z- 
index:0;"> 


<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"> 
</script> 
<script> // jQuery code below 

var count = 0; 

// create table heading & rows by clicking button 
$(document).on("click","#Button4", function() {    

    drawHeading(); 

    for(var i = 0; i < 3; i++) { 
     drawRow(); 
    } 
}); 

function drawHeading() { 

var row = $("<tr />") 
$("#DataTable").append(row); 
row.append($("<th>" + "Trans#" + "</th>")); 
row.append($("<th>" + "DayOfYear" + "</th>")); 
row.append($("<th>" + "Vendor" + "</th>")); 
row.append($("<th>" + "Amount&nbsp;($)" + "</th>")); 
row.append($("<th>" + "Remove" + "</th>")); 

} 

function drawRow() { 

var row = $("<tr />") 
    $("#DataTable").append(row); 
    row.append($("<td>" + "cell1" + "</td>")); 
    row.append($("<td>" + 2 + "</td>")); 
    row.append($("<td>" + "cell3" + "</td>")); 
    row.append($("<td>" + 4 + "</td>")); 
    row.append($("<td/>").append($('<input type="checkbox" name="chkbox2" 
    value="' + count + '"/>'))); 

    count += 1; 
    //alert("count: " + count); 
} 

// find checkBox value *** NOT WORKING should show 0 or 1 or 2 *** 
var checkboxValues = []; 

$('input[name=chkbox2]:checked').map(function() { 
    checkboxValues.push($(this).val()); 
}); 

alert(checkboxValues[0]); 

</script>

私は非常に感謝しています。 Greg

出典

2017-07-15 Greg Wilson

Java？あなたはこの質問がJava関連であると確信していますか？ Java質問タグが不適切であると思われるので、私はJava質問タグを削除しました。 –

入力を追加する方法についてはわかりません。少なくとも、私はこれが入力のために働くと確信しています（これが問題であるかどうかは分かりません）： '$（ ''、{type： 'checkbox'、名前： 'chkbox2'、value：count}）' – JiFus

チェックされた入力が作成される前に探しています。 HTMLを作成し、入力チェックを行います。 – Err

HTMLを作成する前でもチェックボックスの値を確認しています。ボタンのイベントハンドラをクリックするとコードを移動できます。

<script> 
// jQuery code below 

    var count = 0; 

    // create table heading & rows by clicking button 
    $(document).on("click","#Button4", function() {    

     drawHeading(); 

     for(var i = 0; i < 3; i++) { 
      drawRow(); 
     } 

     // find checkBox value 
    var checkboxValues = []; 

    $('input[name=chkbox2]:checked').map(function() { 
     checkboxValues.push($(this).val()); 
    }); 

    alert(checkboxValues[0]); 

    }); 

    function drawHeading() { 

    var row = $("<tr />") 
    $("#DataTable").append(row); 
    row.append($("<th>" + "Trans#" + "</th>")); 
    row.append($("<th>" + "DayOfYear" + "</th>")); 
    row.append($("<th>" + "Vendor" + "</th>")); 
    row.append($("<th>" + "Amount&nbsp;($)" + "</th>")); 
    row.append($("<th>" + "Remove" + "</th>")); 

    } 

    function drawRow() { 

    var row = $("<tr />") 
     $("#DataTable").append(row); 
     row.append($("<td>" + "cell1" + "</td>")); 
     row.append($("<td>" + 2 + "</td>")); 
     row.append($("<td>" + "cell3" + "</td>")); 
     row.append($("<td>" + 4 + "</td>")); 
     row.append($("<td/>").append($('<input type="checkbox" name="chkbox2" 
     value="' + count + '"/>'))); 

     count += 1; 
     //alert("count: " + count); 
    } 

    </script>

チェックボックスをオンにして値を取得する場合は、チェックボックスの変更イベントを聴くことができます。

$('input[name=chkbox2]').change(function() { 
     //perform your logic 
    });

出典

2017-07-15 17:12:50

以降は付いていません。オブジェクトが追加されている場合は、「マップ」関数を使用します。

row.append($("<td/>").append($.map(this.items, function (item, index) { checkboxValues.push($(this).val()); })));

出典

2017-07-15 17:24:56

jQueryがダイナミックに作成されたテーブル/セルのcheckBox値を見つけられない

答えて

関連する問題