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樣式應用程序到一行

回答

相關問題