AJAX：CSS样式应用程序到一行

我需要以下代码的帮助。有两种款式：activatedRow和disactivatedRow。当用户点击按钮（位于桌子的TD内部）时，activatedRow或disactivatedRow被应用于一行。风格的选择基于当前风格。例如，如果一行被激活，那么该按钮将取消激活它，反之亦然。AJAX：CSS样式应用程序到一行

所以，我有一个AJAX success问题。如何编写IF语句来检查行的当前样式？

P.S.另外，知道如何为未激活和激活的行更改TD IMG（按钮）会很有趣。

CSS

.activatedRow td { 
    background-color:#FFFFFF !important; 
    color: #000000 !important; 
} 
.disactivatedRow td { 
    background-color:#DFE1ED !important; 
    color: #9896A8 !important; 
}

功能 “disactivateRow（）” 中的表内

<script type="text/javascript"> 
function disactivateRow(flightNum,obj){ 
      $.ajax({ 
        type: "POST", 
        url: "callpage.php?page=tables/disactivate.php", 
        data: "flightNum=" + flightNum, 
        success: function(){ 
         if ($(obj).hasClass("activatedRow")) { 
        $(obj).removeClass("activatedRow").addClass("disactivatedRow"); 
       } else 
        $(obj).removeClass("disactivatedRow").addClass("activatedRow"); 
       } 
      }); 
} 
</script>

按钮

  <table id="newspaper-b" border="0" cellspacing="2" cellpadding="2" width = "100%"> 
       <thead> 
        <tr> 
         <th scope="col">Flt Num</th> 
         <th scope="col"></th> 
        </tr> 
       </thead> 
       <tbody> 
        <?php foreach ($result1 as $row): 
         $flightNum=$row['flightNum']; 
        ?> 
        <tr id="<?php echo $flightNum; ?>" class="edit_tr"> 
         <td><?php echo $flightNum;?></td> 
         <td id="<?php echo $flightNum; ?>"> 
          <div onclick='disactivateRow("<?php echo $flightNum; ?>", this)'> 
           <img src='images/disactivate.png' alt='Disactivate' /> 
          </div>    
         </td> 
        </tr> 
        <?php endforeach;?> 
       </tbody> 
      </table>

jQuery的数据表激活

$(document).ready(function(){ 
     $('#newspaper-b').dataTable({ 
     "sPaginationType":"full_numbers", 
     "bJQueryUI":true, 
     'fnRowCallback': function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {  
      if (aData[0] == "0") { 
        nRow.className = "disactivatedRow"; 
       } else 
        nRow.className = "activatedRow"; 
      return nRow; 
     } 

     });

答：

它现在：

 $(".disact_but").click(function() { 
      var ID=$(this).attr('id'); 
       $.ajax({ 
         type: "POST", 
         url: "callpage.php?page=tables/disactivate.php", 
         data: "flightNum=" + ID, 
         success: function(){ 
          $("#"+ID).toggleClass("disactivatedRow", 100); 
         } 
       }); 
      return false; 
     });

来源

2012-05-27 Gusgus

P.S.这是“停用”，而不是“禁用”。 –

如果obj是你的代码表示应用的样式的TD可以使用toggleClass

根据类的存在或switch参数的值，在匹配元素集合中的每个元素中添加或删除一个或多个类。

$(obj).closest('tr').toggleClass('disactivatedRow'); 
$(obj).closest('tr').toggleClass('activatedRow');

编辑

根据你添加新的信息，obj是一排的孩子。 closest方法应该给你适当的tr，然后我们可以申请toggleClass

来源

2012-05-27 13:28:21

请看更新。 jQuery DataTable的创建方式是将activateRow和disactivatedRow样式应用于每一行。它工作正常。但是当我点击按钮'disactivateRow'时，没有任何反应。我需要重新加载页面才能看到结果。 – Gusgus

我试过你的代码。实际上没有任何改变。也许你可以看看更新并发布更详细的答案？谢谢。 – Gusgus

AJAX：CSS样式应用程序到一行

回答

相关问题