두 번 버튼을 클릭 할 때 여러 기능

Question

그래서 현재 버튼을 눌러 행을 "비활성화"할 수있는 테이블이 있습니다. 행을 비활성화하면 불투명도가 변경되고 행이 회색으로 표시되어 행이 "비활성화 됨"임을 나타냅니다. '비활성화'버튼도 '활성화'로 변경됩니다. 내가 원하는 것은 "Activate"버튼을 눌러 행을 회색으로 할 수 있고 버튼은 다시 "Deactivate"로 바뀔 수 있습니다.

<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> 

자바 스크립트 :

// ----- 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); 
     } 
    } 
    }); 
}); 

Answer 1

방금 ​​약간 통합 논리를 재구성하기 위해 필요한이 달성하려면 여기

는

HTML/PHP ... 내 코드의 일부입니다 활성 상태임을 나타내는 데 사용할 수있는 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>

Answer 2

대신 클래스와 함께 재생하는 좋은 생각입니다. 따라서 버튼/행이 비활성화 된 경우 해당 버튼/행을 클래스에 추가하고 버튼 클릭시이를 토글합니다. row이 클래스 deactivated를 호출 한 경우 그/그녀가 다시 활성화하고자하는 경우 그래 우리는 사용자에게 묻습니다 경우

그래서 코드는

위의 코드에서

$('.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'); 
}); 

우리가 먼저 확인있어, 다음과 같이 보일 수 있습니다 그에 따라 변경하십시오.

deactivated이라는 클래스가없는 경우 사용자에게 확인을 요청하고 이에 따라 변경합니다

클릭 된 요소의 부모에 액세스하려면 parents() jQuery 메서드를 사용했습니다.