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

Question

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

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

和其他：

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

这种不同形式的原因是我在左侧有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 似乎得到highlightred 和@ 这两个类987654333@。我打印targetRow parent() 并且在切换后似乎是null，而sourceRow 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);

};

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