每次点击一个按钮时的多种功能

所以我现在有一个表格，我可以按下按钮并“停用”一行。通过停用该行，发生的所有情况都是不透明度更改，并且该行显示为灰色，表示行已“停用”。 “取消激活”按钮也会更改为“激活”。我想要的是能够点击“激活”按钮，并能够将该行解除灰色，然后该按钮将变回“停用”。每次点击一个按钮时的多种功能

下面是我的一些代码...

HTML/PHP：

<tr> 
    <td class="mr_id" contenteditable="false"><?php echo intval ($rows['MR_ID'])?></td> 
    <td class="mr_name" contenteditable="false"><?php echo $rows['MR_Name']?></td> 
    <td class="buyer_id" contenteditable="false"><?php echo $rows['Buyer_ID']?></td> 
    <td class="poc_n" contenteditable="false"><?php echo $rows['MR_POC_N']?></td>  
    <td class="poc_e" contenteditable="false"><?php echo $rows['MR_POC_E']?></td> 
    <td class="poc_p" contenteditable="false"><?php echo $rows['MR_POC_P']?></td> 
    <td><button class="edit" name="edit">Edit</button> 
    <button class="deactivate" name="deactivate">Deactivate</button></td> 
</tr>

的JavaScript：

// ----- Deactivate Row ----- 

$(document).ready(function() { 
    $('.deactivate').click(function() { 
    var $this = $(this); 

    if ($this.html() === 'Deactivate') { 
     $this.html('Activate'); 
     var result = confirm("Are you sure you want to deactivate this entry?"); 
     if(result) { 
     $this.closest('tr').css('opacity', 0.5); 
     } 
    } 
    }); 
});

来源

2016-10-04 Rataiczak24

我很惊讶....只是做与你做的相反。使用翻盖，就像一个属性值来确定采取哪种动作 –

要做到这一点，你只需要稍微调整你的逻辑纳入一个tr元素上的一个类，它可以用来表示它的活动状态。试试这个：

$(document).ready(function() { 
 
    $('.deactivate').click(function() { 
 
    var $this = $(this); 
 
    var $tr = $this.closest('tr'); 
 
    var action = $tr.hasClass('deactivated') ? 'activate' : 'deactivate'; 
 

 
    if (confirm('Are you sure you want to ' + action + ' this entry?')) { 
 
     $tr.toggleClass('deactivated'); 
 
     $this.text(function(i, t) { 
 
     return t == 'Deactivate' ? 'Activate' : 'Deactivate'; 
 
     }); 
 
    } 
 
    }) 
 
});

.deactivated { 
 
    opacity: 0.5; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td class="mr_id" contenteditable="false"> 
 
     MR_ID 
 
    </td> 
 
    <td class="mr_name" contenteditable="false"> 
 
     MR_Name 
 
    </td> 
 
    <td class="buyer_id" contenteditable="false"> 
 
     Buyer_ID 
 
    </td> 
 
    <td class="poc_n" contenteditable="false"> 
 
     MR_POC_N 
 
    </td> 
 
    <td class="poc_e" contenteditable="false"> 
 
     MR_POC_E 
 
    </td> 
 
    <td class="poc_p" contenteditable="false"> 
 
     MR_POC_P 
 
    </td> 
 
    <td> 
 
     <button class="edit" name="edit">Edit</button> 
 
     <button class="deactivate" name="deactivate">Deactivate</button> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td class="mr_id" contenteditable="false"> 
 
     MR_ID 
 
    </td> 
 
    <td class="mr_name" contenteditable="false"> 
 
     MR_Name 
 
    </td> 
 
    <td class="buyer_id" contenteditable="false"> 
 
     Buyer_ID 
 
    </td> 
 
    <td class="poc_n" contenteditable="false"> 
 
     MR_POC_N 
 
    </td> 
 
    <td class="poc_e" contenteditable="false"> 
 
     MR_POC_E 
 
    </td> 
 
    <td class="poc_p" contenteditable="false"> 
 
     MR_POC_P 
 
    </td> 
 
    <td> 
 
     <button class="edit" name="edit">Edit</button> 
 
     <button class="deactivate" name="deactivate">Deactivate</button> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td class="mr_id" contenteditable="false"> 
 
     MR_ID 
 
    </td> 
 
    <td class="mr_name" contenteditable="false"> 
 
     MR_Name 
 
    </td> 
 
    <td class="buyer_id" contenteditable="false"> 
 
     Buyer_ID 
 
    </td> 
 
    <td class="poc_n" contenteditable="false"> 
 
     MR_POC_N 
 
    </td> 
 
    <td class="poc_e" contenteditable="false"> 
 
     MR_POC_E 
 
    </td> 
 
    <td class="poc_p" contenteditable="false"> 
 
     MR_POC_P 
 
    </td> 
 
    <td> 
 
     <button class="edit" name="edit">Edit</button> 
 
     <button class="deactivate" name="deactivate">Deactivate</button> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td class="mr_id" contenteditable="false"> 
 
     MR_ID 
 
    </td> 
 
    <td class="mr_name" contenteditable="false"> 
 
     MR_Name 
 
    </td> 
 
    <td class="buyer_id" contenteditable="false"> 
 
     Buyer_ID 
 
    </td> 
 
    <td class="poc_n" contenteditable="false"> 
 
     MR_POC_N 
 
    </td> 
 
    <td class="poc_e" contenteditable="false"> 
 
     MR_POC_E 
 
    </td> 
 
    <td class="poc_p" contenteditable="false"> 
 
     MR_POC_P 
 
    </td> 
 
    <td> 
 
     <button class="edit" name="edit">Edit</button> 
 
     <button class="deactivate" name="deactivate">Deactivate</button> 
 
    </td> 
 
    </tr> 
 
</table>

来源

2016-10-04 13:07:04

这个作品很棒，谢谢！ – Rataiczak24

嗯，有一个问题，在它变成灰色后，我想再次激活....对话框仍然显示“你想停用条目吗？”而不是激活... – Rataiczak24

没关系...知道了！谢谢！ – Rataiczak24

这是一个与班玩，而不是好主意。所以如果按钮/行被禁用，给它一个类并点击按钮切换。

因此，代码可能是这样的，

$('.deactivate').click(function() { 
     var $this = $(this); 
     var parentrow=$(this).parents('tr'); 
     if (parentrow.hasClass('deactivated')) { 
      var result = confirm("Are you sure you want to activate this entry?"); 
      if (result) { 
       $this.html('Deactivate'); 
       parentrow.css('opacity', 1); 
      } 
     } else { 
      var result = confirm("Are you sure you want to deactivate this entry?"); 
      if (result) { 
       $this.html('Activate'); 
       parentrow.css('opacity', 0.5); 
      } 
     } 
     parentrow.toggleClass('deactivated'); 
});

在上面的代码中我们首次检查row有类调用deactivated，如果是我们，如果他/她想要重新激活它要求用户并做相应的更改。

如果row没有称为deactivated的类，我们会要求用户确认以禁用相同的操作并相应地进行更改。

我们使用了jQuery的parents()方法来访问单击元素的父级。

来源

2016-10-04 13:08:36

每次点击一个按钮时的多种功能

回答

相关问题