0

次のコードについて助けが必要です。と の 2 つのスタイルがありactivatedRowますdisactivatedRow。ユーザーがボタン (テーブルの TD 内にある) をクリックすると、activatedRowまたはdisactivatedRowが行に適用されます。スタイルの選択は、現在のスタイルに基づいています。たとえば、行がアクティブ化されている場合、ボタンはそれを非アクティブ化し、その逆も同様です。

だから、私はに問題がありAJAX successます。行の現在のスタイルを確認するための IF ステートメントの書き方は?

PS また、無効化された行と有効化された行の 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;
      });
4

1 に答える 1

0

objコードが使用できることを示すスタイルを適用する TD の場合toggleClass

クラスの存在またはスイッチ引数の値に応じて、一致した要素のセット内の各要素から 1 つ以上のクラスを追加または削除します。

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

編集

あなたが追加した新しい情報によるobjと、行の子です。closestメソッドはあなたに適切なものを提供する必要がtrあり、それから私たちは適用することができますtoggleClass

于 2012-05-27T13:28:21.717 に答える