jqueryのテーブルごとに動的に作成されるボタン

Question

最初の行のみが更新されています。動的に作成された選択タグとボタンを作成できましたが、ドロップダウンを選択するたびに最初の行のみが表示されます私は既にオプションを選択したにもかかわらず、 "最初に選択する"だけを警告します。

jqueryのFUNC」

$('input').each(function(){ 
    if($(this).attr("type")=="button"){ 
    $(this).click(function{ 
     var empid=$('#emp').val(); 
     var job=$('#jobselect').val(); 
     if(job !== "NULL"){ 
     $.ajax({ 
      type:"POST", 
      url:"<?php echo base_url(); ?>userskills/update", 
      data:{'Emp_ID':empid,'Job':job}, 
      cache: false; 
      success: 
      function(data){ 
      alert("Updated!"); 
      } 
     }); 
     }else{ 
     alert("Choose first"); 
     } 
    }); 
    } 
}); 

これは表に

<tbody> 
    <?php foreach($job as $temp): ?> 
    <tr> 
    <td><?php echo $temp->Name?></td> 
    <td><?php echo $temp->Group?></td> 
    <td><?php echo $temp->Section?></td> 
    <td> 
    <select id="jobselect"> 
     <?php foreach($roles as $role): ?> 
     <option value="<?php echo $role->RoleID">"><?php echo $role->RoleName?></option> 
     <?php endforeach; ?> 
    </select> 
    <input type="hidden" id="emp" value="<?php echo $temp->JobID?>" /> 
    <input type="button" id="update"/> 
    </td> 
    </tr> 
    <?php endforeach; ?> 
</tbody> 

Answer 1

私のtbodyあるid属性は、文書内で一意であるはずなので、あなたの現在のコードは無効なHTMLを作成しています。とにかくあなたの要素を表示しますが、要素ID（たとえば'#jobselect'）を選択すると、そのIDを持つの最初の要素のみが返されます。あなたが取得する代わりに、共通のclassを使用するようにして、あなたのJSの使用DOMナビゲーションに含むtd要素を取得するために.closest()を使用して、その関連するコントロールに（thisによって参照）クリックされたボタンから取得し、その後.find()切り替える必要があります

そのtd内のアイテム：あなただけのボタンで入力要素を得るためにあなたのセレクタを変更する場合は、すべてで.each()ループを必要としない

$('input[type="button"]').click(function(){ // no need for .each() 
    var container = $(this).closest('td');   // 1. get common parent element 
    var empid = container.find('.emp').val();  // 2. note the use of .find() with 
    var job = container.find('.jobselect').val(); // class selectors here 
    if (job !== "NULL") { 
    $.ajax({ 
     type:"POST", 
     url:"<?php echo base_url(); ?>userskills/update", 
     cache: false; 
     success: 
     function(data){ 
     alert("Updated!"); 
     } 
    }); 
    } else { 
    alert("Choose first"); 
    } 
}); 

<tbody> 
    <?php foreach($job as $temp): ?> 
    <tr> 
    <td><?php echo $temp->Name?></td> 
    <td><?php echo $temp->Group?></td> 
    <td><?php echo $temp->Section?></td> 
    <td> 
    <select class="jobselect"> 
     <?php foreach($roles as $role): ?> 
     <option value="<?php echo $role->RoleID">"><?php echo $role->RoleName?></option> 
     <?php endforeach; ?> 
    </select> 
    <input type="hidden" class="emp" value="<?php echo $temp->JobID?>" 
    <input type="button" class="update"/> 
    </td> 
    </tr> 
    <?php endforeach; ?> 
</tbody> 

注意。