在jquery中動態創建按表每行中的按鈕

Question

只有第一行正在更新..我能夠創建一個動態創建的選擇標籤和按鈕，但每次我選擇下拉列表時，只有第一行正在更新和其他行將只提醒「選擇第一」，即使我已經選擇了一個選項。

jQuery的功能」

$('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

的id屬性應該是在文檔中唯一的tbody，所以你當前的代碼創建無效的HTML。瀏覽器不會太爲它所困擾，並且會顯示你的元素，但是如果你通過元素ID（如'#jobselect'）選擇了JS，那麼你只能返回帶有該ID的第一個元素。

您應該切換到使用通用的class代替，然後在你的JS使用DOM導航從點擊的按鈕（由this參考）到其相關的控件使用.closest()得到含td元素得到，然後.find()得到該td中的項目：

$('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> 

請注意，如果你改變你的選擇，只是讓那些按鈕的輸入元素，你不需要.each()循環可言。