將行移動到與Html，AngularJS和Javascript不同的表

我想知道是否有可能使用Html，AngularJs和Javascrpit將一個錶行移動到不同的表。將行移動到與Html，AngularJS和Javascript不同的表

下面是一個例子：

-I有我必須做的任務表。

- 如果我檢查，在「做」表中的行應該從它被移除和圖像放置在「完成TABL」之類的。

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>TASKS</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 

 
<div> 
 
    <h3>To do</h3> 
 
    <table class="table table-striped table-hover col-sm-4"> 
 
     <thead> 
 
      <tr> 
 
       <th>Task</th> 
 
       <th>Time</th> 
 
       <th>Done</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      <tr> 
 
       <th>Task_One</th> 
 
       <th>5 min</th> 
 
       <th><input type="checkbox" unchecked></th> 
 
      </tr> 
 
      <tr> 
 
       <th>Task_Two</th> 
 
       <th>2 min</th> 
 
       <th><input type="checkbox" unchecked></th> 
 
      </tr> 
 
      <tr> 
 
       <th>Task_Three</th> 
 
       <th>2 min</th> 
 
       <th><input type="checkbox" unchecked></th> 
 
      </tr> 
 
     </tbody> 
 
    </table> 
 
    
 
    <h3>Done</h3> 
 
    <table class="table table-striped table-hover col-sm-4"> 
 
     <thead> 
 
      <tr> 
 
       <th>Task</th> 
 
       <th>Time</th> 
 
       <th>Done</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      
 
      
 
     </tbody> 
 
    </table> 
 

 
</div> 
 
</body> 
 
</html>

我也查了一些例子，但他們大多是隻是使用JQuery同一個表中移動行，但我必須使用JavaScript來做到這一點。

來源

2016-11-21 Álvaro

見http://stackoverflow.com/a/32703215/709439 – MarcoS

你想拖動和DRAP的功能？或者當你想在TODO列表下勾選複選框時，是否要在完成列表中顯示？ – TechnoCrat

這個想法是：如果我從「TODO」表中檢查任務，它將被放置在「完成」表中，如果我從「完成」表中取消選中一個任務，它將再次放入「TODO」表中。 –

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>TASKS</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
</head> 
 
<body ng-app="app"> 
 

 
<div ng-controller="sampleController"> 
 
    <h3>To do</h3> 
 
    <table class="table table-striped table-hover col-sm-4"> 
 
     <thead> 
 
      <tr> 
 
       <th>Task</th> 
 
       <th>Time</th> 
 
       <th>Done</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody ng-repeat="x in firstTable"> 
 
<tr> 
 
    <td>x.taskName</td> 
 
    <td> x.tastTime</td> 
 
    <td><input type="checkbox" ng-click="moveData($index)"/></td> 
 
</tr> 
 
      
 
     </tbody> 
 
    </table> 
 
    
 
    <h3>Done</h3> 
 
    <table class="table table-striped table-hover col-sm-4"> 
 
     <thead> 
 
      <tr> 
 
       <th>Task</th> 
 
       <th>Time</th> 
 
       <th>Done</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody ng-repeat="x in secondTable"> 
 
<tr> 
 
    <td>x.taskName</td> 
 
    <td> x.tastTime</td> 
 
    <td><input type="checkbox" /></td> 
 
</tr> 
 
      
 
     </tbody> 
 
    </table> 
 

 
</div> 
 
</body> 
 
<script> 
 
var app=angular.module("app",[]); 
 
app.controller("sampleController",["$scope",function($scope){ 
 
$scope.firstTable=[{taskName:'Task_One',tastTime:'5 min'},{taskName:'Task_Two',tastTime:'2 min'},{taskName:'Task_Three',tastTime:'2 min'}]; 
 
$scope.secondTable=[]; 
 

 
$scope.moveData=function(index){ 
 
$scope.secondTable.push($scope.firstTable[index]); 
 
$scope.firstTable.splice(index,1); 
 
}; 
 

 
}]); 
 
</script> 
 
</html>

來源

2016-11-21 10:54:06 Anil

我有下面的例子創建了所有未決/ TODO任務將在第一列表中顯示並已經完成了任務，將在第二列表中。當複選框在第一個列表中被點擊時，它將被移動到完成列表。

HTML

<html ng-app="soApp"> 
    <body ng-controller="soController"> 
     <table cellpadding="0" border="0" cellspacing="0"> 
      <tr id="heading"> 
       <th>task</th> 
       <th>time</th> 
       <th>done</th> 
      </tr> 

      TODO 
      <tr class="color2" ng-repeat="todo in todoList| filter:{isChecked:false}"> 
       <td>{{todo.task}} </td> 
       <td>{{todo.time}}</td> 
       <td> <input type="checkbox" ng-model="todo.isChecked"> </td> 
      </tr> 

     </table> 

     <table> 
      <tr id="heading"> 
       <th>task</th> 
       <th>time</th> 
       <th>done</th> 
      </tr> 
      Done 
      <tr class="color2" ng-repeat="todo in todoList| filter:{isChecked:true}"> 
       <td>{{todo.task}} </td> 
       <td>{{todo.time}}</td> 
       <td> <input type="checkbox" ng-model="todo.isChecked"> </td> 
      </tr> 
     </table> 
    </body> 
</html>

角/ Javascript代碼：

var app = angular.module('soApp', []); 
app.controller('soController', function ($scope) { 
    $scope.todoList = [{task: "pqr", time: 2, isChecked: false}, 
     {task: "abc", time: 1, isChecked: false}, 
     {task: "xyz", time: 3, isChecked: true}]; 
});

來源

2016-11-21 11:17:08 TechnoCrat

將行移動到與Html，AngularJS和Javascript不同的表

回答

相關問題