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

Question

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

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

另一个:

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

这种不同形式的原因是我在左侧有aTable的多个实例，我需要从中选择一个行与右侧上的一行one bTable 交换。

所以我必须从左侧的多个aTable表中选择1行，将其突出显示为红色，从右侧的bTable中选择1行，将其突出显示绿色，然后点击“swap”调用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 和 highlightgreen 两个类。我打印 targetRowparent() 并在切换后显示为 null，而 sourceRowparent() 看起来很好......任何人都有知道问题是什么吗？

Answer 1

仅使用最上面的一段代码我就可以看到多个问题。这是一个更好的方法:

FIDDLE

首先，不要不一致地使用这些类。您将类“bTable”赋予表，而将“aTable”赋予表中的行。这很令人困惑。只需在 table 上使用它即可。以下是我设置 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);

};

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