在 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 属性在文档中应该是唯一的，因此您当前的代码会创建无效的 HTML。浏览器不会对此感到太困扰，并且无论如何都会显示您的元素，但是在 JS 中，如果您按元素 ID（如 '#jobselect'）进行选择，您只能返回具有该 ID 的 first 元素.

您应该改用普通的class，然后在您的JS 中使用DOM 导航从单击的按钮（由this 引用）到使用.closest() 的相关控件以获取包含@987654328 @ 元素，然后 .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() 循环。