1

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

<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类highlightgreen。我打印targetRowparent() 并且似乎null在切换之后，而sourceRowparent() 看起来很好......有人知道问题是什么吗？

4

1 回答 1

1

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

小提琴

首先，不要不一致地使用类。您将“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);

};

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

于 2013-06-24T20:59:23.620 回答