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

【问题标题】：How to share rows between two tables on the same page如何在同一页面上的两个表之间共享行
【发布时间】：2017-02-14 20:21:33
【问题描述】：

我想做这样的事情：

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

有人可以帮帮我吗？

【问题讨论】：

很好的插图，现在你的代码在哪里？到目前为止，您尝试过什么？
这和ajax有什么关系？这可以在 Angular 中使用绑定属性轻松实现。
这个问题太宽泛了：要么有太多可能的答案，要么好的答案对于这种格式来说太长了。请添加详细信息以缩小答案集或隔离可以在几段中回答的问题。

标签： javascript html angularjs

【解决方案1】：

这是结果的屏幕截图：

以下是 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

【讨论】：

【解决方案2】：

您可以查看this 代码。它完全是用 Javascript 和 html 制作的。
顺便说一句，它被称为选择列表。

【讨论】：

【解决方案3】：

只需使用 append() 或 appendTo()

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

Here完整代码

【讨论】：

它被标记为 angular，而不是 jquery