同じ構造化テーブルから選択オプションから値を取得する

Question

私はHTMLページでテーブル/テーブルを動的に作成しています。 1つまたは複数のテーブルが存在する可能性があります。数はさまざまです。テーブルには1つの行しかありません。これらは同じテーブル構造を持っています。私のテーブルの行には、選択肢とボタンがあります。私がここでやっていることは、selectオプションの値を変更し、ボタンを使ってデータベースを更新することです。そのために私はselectオプションから選択し、その値を隠し入力フィールドに入れます。その後、すべての入力データを取り込み、DBを更新しました。たとえば、私は2つのテーブルを持っている場合、私は2つのIDを選択するオプションが必要です。それを行うには、私はからループのIDをループしています。しかし、それはうまくいかなかった。つまり、私はその価値にアクセスすることができません。しかし、同じ文書の下で2つのIDをハードにコーディングすれば、それはうまく機能します。

のtbody ...

echo "<form id='form' name='form'>"; 
          echo "<tbody class='tbl_tbody'>"; 
          echo "<tr>"; 
           echo "<td style='width: 115px;'><b>".trim($row_sub_res['statDate'])."</b></td>"; 
           echo "<td style='width: 115px;'><b>".trim($row_sub_res['tarDate'])."</b></td>"; 

           echo "<td>"; 

           echo "<label class='w3-text-red'><b>".trim($row_sub_res['status_name'])."</b></label><br>"; 
           echo "<input name='oldSubStat' type ='hidden' id='selected_stat' value=".trim($row_sub_res['status']).">"; //first input 0 
           echo "<input name='newSubStat' type ='hidden' id='selected_stat_new_id' class='selected_statx$countx'>"; 

           echo "<select id='select_my_id$countx' class='select_my_class$countx' >"; 
           echo "<option disabled selected>Change Status</option>"; 
           echo "<option id='1' value='1'>Pending</option>"; 
           echo "<option id='3' value='3'>Complete</option>"; 
           echo "<option id='4' value='4'>On Hold</option>"; 
           echo "</select>"; 

           echo "</td>"; 

           //echo "<td>".trim($row_sub_res['tarDate'])."</td>"; 
           echo "<td><b><input type='text' id='targetDatepickerID$countx' class='datepickerClass' disabled='disabled' placeholder='yyyy-mm-dd' name='tdate' value=".trim($row_sub_res['tarDate'])."></b></td>"; 

           echo "<td> <input type='submit' id='sub_row_update_id$countx' class='sub_row_update' value='Update'/> </td>"; 
          echo "</tr>"; 
          echo "</tbody>"; 
         echo "</form>"; 

私はテーブルをループしています。 countxはインクリメントしています。

私は、ハードのようにコーディングされた場合、私は2つのテーブルを持っている場合は、すべてがうまく機能...

$(".select_my_class0").change(function() { 
    var idx = $(this).children(":selected").attr("id"); 
    $(".selected_statx0").val(""); 
    $(".selected_statx0").val(idx); 
    console.log("idx " + idx); 
}); 

    $(".select_my_class1").change(function() { 
    var idx = $(this).children(":selected").attr("id"); 
    $(".selected_statx1").val(""); 
    $(".selected_statx1").val(idx); 
    console.log("idx " + idx); 
}); 

しかし、私ループ、この場合は。それは動作しません....

for (var j = 0; j < 2; j++) { 
    console.log("idx " + j); 
    $(".select_my_class"+j).change(function() { 
    var idx = $(this).children(":selected").attr("id"); 
    $(".selected_statx"+j).val("test"); 
    $(".selected_statx"+j).val(idx); 

    }); 
} 

私はIDとクラスの両方を使用してみました、しかし、ループの両方で動作しません。

マイボタンのクリックイベントが...

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

    $("#sub_row_update_id"+i).click(function(e) { 

    var $subitem; 
    e.preventDefault(); 
    $subitem = $(this).closest("tr") // Finds the closest row <tr> 
        .find("input").each(function() { 

    }); 

     var xxx2 = $subitem[0]["value"]; //old status 
     var yyy2 = $subitem[1]["value"]; //new status 
     var zzz2 = $subitem[2]["value"]; //new tar date 

     console.log(xxx2); 
     console.log(yyy2); 
     console.log(zzz2); 

    }); 

    } 

Answer 1

あなたがループにそれを持っていけない、あなたはセレクタで開始を使用することができます。

Answer 2

イベントリスナーを接続するソリューションはどちらも機能しているようです。ここに、JSfiffleのID：sを使ったデモンストレーションがあります。だから、おそらくあなたが投稿したものの外に、他のエラーの原因を探しているはずです。要素を正しくターゲティングしていますか？

https://jsfiddle.net/wj8aygsy/

$("#select_my_id0").change(function() { 
    var idx = $(this).children(":selected").attr("id"); 
    $(".selected_statx0").val(""); 
    $(".selected_statx0").val(idx); 
    console.log("separate " + idx); 
}); 

    $("#select_my_id1").change(function() { 
    var idx = $(this).children(":selected").attr("id"); 
    $(".selected_statx1").val(""); 
    $(".selected_statx1").val(idx); 
    console.log("separate " + idx); 
}); 


for (var j = 0; j < 2; j++) { 
    console.log("idx " + j); 
    $("#select_my_id"+j).change(function() { 
    var idx = $(this).children(":selected").attr("id"); 
    $(".selected_statx"+j).val("test"); 
    $(".selected_statx"+j).val(idx); 
    console.log("loop " + idx); 
    }); 
}