使用上下文菜單在選定行上提取數據

Question

我想通過使用Jquery上下文菜單事件來編輯/刪除表格中一行中的數據。問題是，當我點擊一行最後一行將被提取，而不是在選定的行。

表：

<table id="ppmpsupplies" class="table table-bordered table-hover" cellspacing="0" width="100%"> 
      <thead> 
      <tr> 
       <th>Code</th> 
       <th>General Description</th> 
       <th>Unit</th> 
       <th>Quantity</th> 
       <th>Estimated Budget</th> 
       <th>Mode of Procurement</th>     

      </tr> 
      </thead> 
      <tbody> 
      <?php foreach($items as $item){?> 
      <tr> 
      <td><?php echo $item->id;?></td> 
      <td><?php echo $item->description;?></td> 
      <td><?php echo $item->unit;?></td> 
      <td><?php echo $item->quantity;?></td> 
      <td><?php echo $item->budget;?></td> 
      <td><?php echo $item->mode;?></td>      
      </tr> 
      <?php }?> 

     </tbody> 
     <tfoot> 
      <td colspan="3"></td> 
      <td>Total</td> 
      <td></td> 
     </tfoot> 
     </table> 

上下文菜單：您的JS代碼內

     sep3: "----", 
         "edit": { 
          name: "Edit", 
          icon: "fa-pencil-square-o", 
          callback: function(itemKey, options) { 
          $('#ppmpsupplies tbody tr').on('click', edit_item(<?php print $item->id ?>)); 
          // var m = "clicked: " + itemKey; 
          // window.console && console.log(m) || alert(m); 
          return true; 
          } 
         }, 
         sep4: "----", 
         "delete": { 
          name: "Delete", 
          icon: "fa-trash-o", 
          callback: function(itemKey, options) { 
          $('#ppmpsupplies tbody tr').on('click', delete_item(<?php print $item->id ?>));         
          return true; 
          } 
         }, 

Answer 1

使用data-*屬性傳給你想要編輯的ID /刪除。

更改以下內容。

來源：

<tbody> 
<?php foreach($items as $item){?> 
<tr> 

要

<tbody> 
<?php foreach($items as $item){?> 
<tr data-id="<php print $item->id?>"> 

然後更新您的JS拉出.data('id')值。

更改以下內容。

來源：

// Edit 
$('#ppmpsupplies tbody tr').on('click', edit_item(<?php print $item->id ?>)); 

// Delete 
$('#ppmpsupplies tbody tr').on('click', delete_item(<?php print $item->id ?>)); 

要：

// Edit 
var that = $(this); 
$('#ppmpsupplies tbody tr').on('click', edit_item(that.data('id'))); 

// Delete 
var that = $(this); 
$('#ppmpsupplies tbody tr').on('click', delete_item(that.data('id')));