Question

我想做这样的事情：

正如您所看到的，它们必须位于同一个html页面中，并且应该在不刷新整个页面的情况下传输行。

有人可以给我一些帮助吗？

Answer 1

您可以查看this代码。它完全用Javascript和html制作它被称为btw的选择列表。

Answer 2

以下是结果的屏幕截图：

以下是HTML的重要部分：

  <body ng-controller="MainCtrl">
    <table border=1>
      <thead>
        <tr>
          <th colspan="2">Table 1</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="item in table1">
          <td><input type="checkbox" ng-model="item.checked"></td>
          <td><span ng-bind="item.data"></span></td>
        </tr>
      </tbody>
    </table>
    <br>
    <button ng-click="transferRight()">Transfer ></button>
    <br>
    <button ng-click="transferLeft()">< Transfer</button>
    <br>
    <br>
    <table border=1>
      <thead>
        <tr>
          <th colspan="2">Table 2</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="item in table2">
          <td><input type="checkbox" ng-model="item.checked"></td>
          <td><span ng-bind="item.data"></span></td>
        </tr>
      </tbody>
    </table>
  </body>

这是javascript / angularjs的重要部分：

app.controller('MainCtrl', function($scope, $filter) {
  $scope.table1 = [
    {checked:false, data:'Data 1'},
    {checked:true, data:'Data 3'},
    {checked:true, data:'Data 4'},
    {checked:false, data:'Data 6'},
    {checked:false, data:'Data 7'}];
  $scope.table2 = [
    {checked:false, data:'Data 2'},
    {checked:false, data:'Data 5'}];
  $scope.transferRight = function() {
    angular.forEach($filter('filter')($scope.table1, {checked: true}), function(value) {
      value.checked = false;
      $scope.table2.unshift(value);
      $scope.table1.splice($scope.table1.indexOf(value), 1);
    });
  };
  $scope.transferLeft = function() {
    angular.forEach($filter('filter')($scope.table2, {checked: true}), function(value) {
      value.checked = false;
      $scope.table1.unshift(value);
      $scope.table2.splice($scope.table2.indexOf(value), 1);
    });
  };
});

以下是工作的Plunker http://plnkr.co/edit/qoARS4mtp5CQQnf1kogA?p=preview

的链接

Answer 3

只需使用append（）或appendTo（）

$(".toRight").click(function () {
     $("#table1 input:checked").closest("tr").appendTo("#table2"); 
});

Here完整代码

如何在同一页面上的两个表之间共享行

3 个答案: