php - 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");
       }
     });
   }
});

这是我在 table 上的 body

<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 属性在文档中应该是唯一的，因此您当前的代码会创建无效的 HTML。浏览器不会太受它的困扰，无论如何都会显示你的元素，但在 JS 中，如果你通过元素 ID 选择(如 '#jobselect')，你只会首先返回 具有该 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() 循环。