在jquery中每行在表中动态创建按钮

时间:2017-08-03 03:39:08

标签: php jquery codeigniter

只有第一行正在更新..我能够创建一个动态创建的选择标签和按钮,但每次我选择下拉时,只有第一行正在更新,其他行只会提醒#34;先选择"即使我已经选择了一个选项。

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>

1 个答案:

答案 0 :(得分:0)

id属性在文档中应该是唯一的,因此您当前的代码会创建无效的HTML。浏览器不会被它太烦恼并且无论如何都会显示你的元素,但是如果按元素ID选择(如'#jobselect'),那么在JS中你只能回到第一个具有该ID的元素。

您应该切换为使用通用的class,然后在您的JS中使用DOM导航,使用.closest()从点击的按钮(由this引用)到其相关控件获取包含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()循环。