点击事件同时适用于所有视图按钮 [英] The click event is working for all the view button at the same time

问题描述

我正在用按钮在屏幕上显示记录列表，如下图所示。

I am displaying the list of the records on the screen with buttons as showing on the image below.

现在我正在显示 employee_id 在弹出窗口中，因此管理员将单击查看按钮，并显示带有员工ID的弹出窗口。

Now I am displaying the employee_id on the popup, So the admin will click on the view button and popup will display with the employee id.

但是我的问题是，我单击查看按钮，将在弹出窗口中获取所有员工列表。为什么会出现此问题，因为我在循环中查看了按钮。

but my issue is, I am getting the all the employee list in the popup on click on view button. why this issue because I view button in the loop.

      <td><a href="javascript:void(0);" id="open_popup">View</a>

我的脚本在这里

$(document).ready(function(){
              $("a#open_popup").click(function(){
                    $(".popup").show();  
               });  
 }); 

因此，当我单击任何视图按钮时，它将在弹出窗口中显示所有员工详细信息，

So when I click on any of the view buttons it's displaying all the employee details in the popup and I have to display the single user id.

<?php if (!empty($get_emp_records)) {?>
<table class="table " >  
        <thead>
         <tr>  
          <th>Employee Name</th> 
           <th>Designation</th>  
           <th>Role</th>  
           <th>Status</th>  
           <th>Action</th>               
         </tr> 
          </thead>
         <?php  
         foreach ($get_emp_records as $row)  
         { $encryption_id=$this->encryption->encrypt($row->id);//encrpt the id ?>
            <tbody>
            <tr>   
            <td><?php echo $row->firstname;  echo $row->lastname;?></td>
            <td><?php echo $row->designation;?></td>  
            <td><?php echo $row->access_role;?></td>
            <?php if ($row->is_approved == 1): ?>
            <td><a href="javascript:void(0)">Approved</a></td>
            <?php else: ?>
            <td><a  href="#">Pending</a></td>
          <?php endif; ?>
          <td><a href="javascript:void(0);" id="open_popup">View</a> 
            <a href="<?php echo site_url('Employee_control/employee_archive?key='.$encryption_id)?>">Archive</a>
          </td>  

          <div class="popup"  style="display: none;">
            <p><?php echo $row->employee_id;?></p>
          </div>
            </tr>   
          </tbody> 
         <?php }       
         ?>              
   </table>  
<?php }else{echo "No record found";}?>

推荐答案

希望这对您有帮助：

添加功能像这样的视图锚点上的 onclick 事件上的 openPopup

Add a function openPopup on onclick event at view anchor like this

<td>
   <a onclick="openPopup(this)" data-id="<?=$row->id;?>">View</a>
   ........ 
</td> 

提供 id 到弹出窗口像这样的div：

Provide id to your popup div like this :

<div id="popup-<?=$row->id;?>"  style="display: none;">
   <p><?php echo $row->employee_id;?></p>
</div>

您的js函数 openPopup 应该像这样：

Your js function openPopup should be like this :

<script type="text/javascript">

function openPopup(obj) 
{
    var id = $(obj).data('id');
    $("#popup-"+id).show();  
}

function closePopup(obj) 
{ 
   var id = $(obj).data('id'); 
   $("#popup-"+id).hide(); 
}; 
</script>

这篇关于点击事件同时适用于所有视图按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！