硬表行交换，换行的母公司为空

Question

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

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

另：

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

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

所以我必须从左侧的任意多的选择1排aTable表，突出显示红色，从右侧bTable选择1排，突出显示它的绿色，并单击“交换”来调用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两个类。我打印targetRow父母（），似乎是null切换后，而sourceRow父母（）似乎很好......任何人都有什么想法是什么问题？

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); 

}; 

这可能需要调整完全符合你要找的东西，但它应该完成大部分工作。