Question

我有2种类型的表，我想在2之间交换行。一个是：

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

和另一个：

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

这种不同形式的原因是我在左侧上有{em>多个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);
};

一切正常，如果我进行一次交换，但是如果我尝试交换这些行，则targetRow无法突出显示因此被选中，而sourceRow似乎得到两个类{ {1}}和highlightred。我打印highlightgreen parent（）并在切换后显示为targetRow，而null parent（）显示正常......任何人都知道问题是什么？

Answer 1

我只能看到顶部的代码存在多个问题。这是一个更好的方法：

FIDDLE

首先，不要使用不一致的类。您将类“bTable”赋予表，但将“aTable”赋予表中的行。这令人困惑。只需在桌子上使用它。以下是我设置HTML的方法：

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

现在进行一些代码整合：

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

    var cl;

    if ($(this).parents('.myTable').hasClass('aTable')) cl = 'highlightred';
    else cl = 'highlightgreen';

    if($(this).hasClass(cl)) {
        $(this).removeClass(cl);
    } else {
        $('.' + cl).removeClass(cl);
        $(this).addClass(cl);
    }
});

现在你的swapFunction（）：

function swapFunction() {

    var sourceRow = $('.bTable tbody tr.highlightgreen').removeClass('highlightgreen');
    var targetRow = $('.aTable tbody tr.highlightred').removeClass('highlightred');
    sourceRow.after(targetRow.clone());
    targetRow.replaceWith(sourceRow);

};

这可能需要进行调整以完全符合您的要求，但它应该完成大部分工作。

硬表行交换，交换行的父级为空

1 个答案: