php - AJAX:CSS样式应用到一行

Question

我需要以下代码的帮助。有两种样式:activatedRow 和 disactivatedRow。当用户单击按钮(位于表格的 TD 内)时，activatedRow 或 disactivatedRow 将应用于一行。样式的选择基于当前样式。例如，如果一行被激活，则该按钮会将其停用，反之亦然。

所以，我遇到了AJAX 成功 的问题。如何编写 IF 语句来检查行的当前样式？

附言了解如何更改禁用和激活行的 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 DataTable 激活

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

Answer 1

如果 obj 是应用样式的 TD，因为您的代码表明您可以使用 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');

编辑

根据您添加的新信息，obj 是一行的子项。 closest 方法应该给你适当的 tr 然后我们可以应用 toggleClass