Question

所以我现在有一张桌子，我可以按下按钮，然后停用＆＃34;停用＆＃34;一排。通过停用该行，发生的所有事情都是不透明度变化，并且该行显示为灰色，表示该行已被取消激活。＆＃34; ＆＃34;停用＆＃34;按钮也会变为＆＃34;激活。＆＃34;我想要的是能够然后点击＆＃34;激活＆＃34;按钮，并能够取消灰色该行，然后按钮将更改回＆＃34;取消激活。＆＃34;

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

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

Answer 1

要实现这一点，您只需稍微重构逻辑，在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

最好与课程一起玩。因此，如果按钮/行被取消激活，则为其提供一个类，并在单击按钮时切换它。

所以代码看起来像这样，

$('.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()方法来访问被点击元素的父级。

单击按钮两次时的多个功能

2 个答案: