Html、AngularJS、Javascriptで行を別のテーブルに移動する

Html、AngularJs、Javascrpitを使用して1つのテーブル行を別のテーブルに移動できるかどうかは疑問でした。ここでHtml、AngularJS、Javascriptで行を別のテーブルに移動する

は一例です：私がしなければならないタスクを持つテーブルがある-I

。

私は「行うには」表の行の上でご確認-ifそれから除去され、画像のように「完了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

あなたがドラッグ＆DRAPの機能をしたいですかhttp://stackoverflow.com/a/32703215/709439 – MarcoS

を参照してください？ TODO listのチェックボックスをオンにしたときにDoneのリストに表示したいのですか？ – TechnoCrat

アイデアは：「TODO」テーブルからタスクをチェックすると「Done」テーブルに配置され、「Done」テーブルからタスクを選択解除すると、「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で行を別のテーブルに移動する

答えて

関連する問題