jQuery 1.7在表格之間來回移動

我有兩個表格，我試圖在 - searchResultsTable和selectedCustomersTable之間移動行。這是一個非常簡單的任務 - 只要能夠連續地在兩個表之間來回移動行即可。jQuery 1.7在表格之間來回移動

我從searchResultsTable將多行移入selectedCustomersTable，反之亦然。因此，用戶可以使用添加和刪除按鈕不斷地在兩個表格之間來回移動行。

添加按鈕是當searchResultsTable選擇了行並且您想將它們移動到selectedCustomersTable時。這樣可行。

刪除按鈕用於選擇selectedCustomersTable中的行並將其移除/移回到searchResultsTable。這似乎並不奏效。在將行向前/向後移動幾次之後，似乎事件丟失了，它就停止工作。我試圖在jquery 1.7中使用.on事件，但我沒有運氣。「在兩個表格之間移動行」功能不會一遍又一遍地工作。它就像是一次工作，那麼它不會一遍又一遍地工作。

這是我的jQuery代碼 - 可以有人看到問題是什麼，並提供一種方法讓這個工作一遍又一遍？一遍又一遍 - 意思是 - 如果用戶想要這樣做，則會在兩張桌子之間來回移動行。

<script type="text/javascript"> 
    $(function() { 
     $('#searchResultsTable').on('click', function (e) { 
      bindTableEvents(); 
     }); 
     $('#selectedCustomersTable').on('click', function (e) { 
      bindTableEvents(); 
     }); 

     bindTableEvents(); 


     function bindTableEvents() { 
      var $t1 = $('#searchResultsTable'); 
      var $t2 = $('#selectedCustomersTable'); 
      alert('in'); 
      setupTable($t2); 
      setupTable($t1); 
     } 

     function setupTable($table) { 
      $table.initializeTable({ 
       navigate: { 
        control: { keyboard: true, mouse: true }, 
        select: { multiple: true } 
       } 
      }); 

      $table.on('mouse', function (e, event) { 
       if (event.which == 1 && !event.ctrlKey && !event.shiftKey) { 
        var $selected = $table.selected(); 
        if ($selected.length == 1) { 
         !$selected.hasClass('active'); 
        } 
       } 
      }); 

      $table.on('keyboard', function (e, event) { 
       var $selected = $table.selected(); 
       switch (event.which) { 
        case 13: 
         //ENTER 
         if ($selected.length == 1) { 
          !$selected.hasClass('active'); 
         } 
         if ($selected.length > 0) { 

         } 
         break; 
        case 46: 
         //DELETE 
         if ($selected.length > 0) { 

         } 
         break; 
       } 
      }); 
     } 

     $('#addButton').click(function() { 
      var selectedRows = $('#searchResultsTable').selected(); 
      $('#selectedCustomersTable').append(selectedRows.removeClass('focus').remove()); 
     }); 

$('#removeButton').click(function() { 
      var selectedRows = $('#selectedCustomersTable').selected(); 
      $('#searchResultsTable').append(selectedRows.removeClass('focus').remove()); 
      }); 

    }); 
</script>

來源

2012-04-04 Frekster

我也在爲這個問題而努力。但我正在尋找直接移動這些行。這裏是我的解決方案：

$(document).ready(function() { 
    $("#searchResultsTable tbody").on("click","tr", function() { 
     var tr = $(this).closest("tr").remove().clone(); 
    $("#selectedCustomersTable tbody").append(tr); 
    }); 
    $('#selectedCustomersTable table tbody').on("click","tr", function() { 
      var tr = $(this).closest("tr").remove().clone(); 
      $("#searchResultsTable tbody").append(tr); 
    }); 
});

這裏的要點是綁定tbody上的事件處理，它處理表行上的點擊。所以插入到第二個表中的新HTML元素保留了回退的功能，因爲tbody正在處理事件。

來源

2013-03-05 14:08:38 Lako

jQuery 1.7在表格之間來回移動

回答

相關問題