每次點擊一個按鈕時的多種功能

所以我現在有一個表格，我可以按下按鈕並「停用」一行。通過停用該行，發生的所有情況都是不透明度更改，並且該行顯示爲灰色，表示行已「停用」。「取消激活」按鈕也會更改爲「激活」。我想要的是能夠點擊「激活」按鈕，並能夠將該行解除灰色，然後該按鈕將變回「停用」。每次點擊一個按鈕時的多種功能

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

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

每次點擊一個按鈕時的多種功能

回答

相關問題