在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

id属性在文档中应该是唯一的，因此您当前的代码将创建无效的HTML。 浏览器不会太麻烦，它仍然会显示您的元素，但是在JS中，如果您通过元素ID（例如'#jobselect' ）进行选择，您只会获得具有该ID的第一个元素。

您应该改用公共class ，然后在JS中使用DOM导航使用.closest()从包含单击的按钮（由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()循环。