Question

I need a help with the following code. There are 2 styles: activatedRow and disactivatedRow. When a user clicks on a button (located inside the TD of a table), then either activatedRow or disactivatedRow is applied to a row. Selection of a style is based on current style. For instance, if a row is activated, then the button will disactivate it, and vice versa.

So, I have a problem with AJAX success. How to write IF statement to check current style of a row?

P.S. Also it would be interesting to know how to change TD IMG (button) for disactivated and activated rows.

CSS

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

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

Button inside the table

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

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

      });   

ANSWER:

It works now:

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

Answer 1

If obj is the TD to apply the style as your code indicates you could use toggleClass

Add or remove one or more classes from each element in the set of matched elements, depending on either the class’s presence or the value of the switch argument.

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

EDIT

According new information you added, obj is a row’s child. closest method should give you the appropiate tr and then we can apply toggleClass