Wie Zeilen zwischen zwei Tabellen auf der gleichen Seite teilen

-3

ich so etwas wie dies tun wollen:Wie Zeilen zwischen zwei Tabellen auf der gleichen Seite teilen

Wie Sie sehen können sie in der gleichen HTML-Seite sein muss und sollte Reihen übertragen, ohne die erfrischende ganze Seite noch einmal.

Jemand kann mir Hilfe geben?

Quelle

2017-02-14 Ivan

Nizza Illustration, jetzt, wo Ihr Code ist? Was hast du bisher versucht? –

Was hat das mit Ajax zu tun? Dies könnte leicht in Angular erreicht werden, unter Verwendung von Bindungseigenschaften. – jdmdevdotnet

* Diese Frage ist zu breit: Es gibt entweder zu viele mögliche Antworten, oder gute Antworten wären für dieses Format zu lang. Bitte fügen Sie Details hinzu, um die Antwort einzuschränken oder um ein Problem zu isolieren, das in ein paar Absätzen beantwortet werden kann. * – BSMP

Hier ist ein Screenshot der Ergebnisse:

Hier ist die wichtige Teile der 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>

Hier die wichtige Teile der 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); 
    }); 
    }; 
});

Hier ist ein Link zu einem Arbeits Plunker, http://plnkr.co/edit/qoARS4mtp5CQQnf1kogA?p=preview

Quelle

2017-02-14 22:13:04

Sie könnten this Code ansehen. Es ist komplett mit Javascript und HTML erstellt.
Es heißt eine Auswahlliste BTW.

Quelle

2017-02-14 20:23:54

-1

verwenden nur append() oder appendTo()

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

Here vollständigen Code

Quelle

2017-02-14 21:04:50

Es ist unter eckig getaggt, nicht jquery –

Wie Zeilen zwischen zwei Tabellen auf der gleichen Seite teilen

Antwort

Verwandte Themen