1

2種類のテーブルがあり、2つの間で行を交換したい.1つは次のようなものです:

<table>
 <tr class="aTable">
  <td>
</table>

そして他の：

<table class="bTable">
 <tr>
  <td>
</table>

この異なる形式の理由は、左側にの複数のインスタンスがあり、そこから 1 つの行を選択して右側の1 つの行と交換する必要があるためです。aTable bTable

したがってaTable、左側の複数のテーブルのいずれかから 1 行を選択し、赤色で強調表示し、右側から 1 行を選択し、bTable緑色で強調表示し、[スワップ] をクリックしてswapFunction()

次のコードを使用して、毎回特定の行を強調表示します

$('.aTable').on('click', function(event) {
   if($(this).hasClass("highlightred")){

      $(this).toggleClass('highlightred');

   }else{

      $('.aTable').each(function(idx, elm) {

          $('.aTable').removeClass('highlightred');

      });

      $(this).toggleClass('highlightred');
   }
});

$('.bTable').on('click', 'tbody tr', function(event) {

    $(this).toggleClass('highlightgreen')
           .siblings().removeClass('highlightgreen');

});

そして、スワップする次の関数：

function swapFunction() {

        var sourceRow = $('.bTable tbody tr.highlightgreen').removeClass('highlightgreen').toggleClass('aTable').eq(0);
        var targetRow = $('tbody tr.aTable.highlightred').removeClass('highlightred').removeClass('aTable').eq(0);

        sourceRow.after(targetRow.clone());
        targetRow.replaceWith(sourceRow);
};

スワップを 1 回行うと、すべて正常に動作しますが、これらの行を元に戻そうとすると、targetRowがハイライト表示されず、 と の両方sourceRowのクラスが取得されるようです。私はparent（）を印刷し、切り替え後にあるように見えますが、parent（）は問題ないように見えます...誰もが何が問題なのか分かりますか？highlightredhighlightgreentargetRownullsourceRow

4

1 に答える 1