Move rows to a different table with Html, AngularJS and Javascript

Question

I was wondering if it's possible to move one table row to a different table using Html, AngularJs and Javascrpit.

Here is an example:

-I have a table with tasks I have to do.

-If I check on of the rows in the "To do" table it should be removed from it and placed in the "Done Tabl" like in the image.

After moving row

<!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>

I have checked some examples but most of them are just about moving rows inside the same table using JQuery but I have to do it using Javascript.

Do you want drag and drap functionality? or do you want to be shown in list under Done when checkbox is checked under TODO list? — TechnoCrat
– TechnoCrat, Commented Nov 21, 2016 at 10:55
The idea is: if I check a task from the "TODO" table it will be placed in the "Done" table and if I uncheck a task from the "Done" table it will be placed again in the "TODO" table. — AlmondCluster
– AlmondCluster, Commented Nov 21, 2016 at 11:25

Anil · Accepted Answer · 2016-11-21 10:54:06Z

<!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>

TechnoCrat · Accepted Answer · 2016-11-21 11:17:08Z

I have created below example in which all the pending/TODO task will be shown in first list and already done task will be shown in second list. when checkbox will be clicked in the first list then it will be moved to Done list.

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>

Angular/Javascript Code:

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}];
});

Collectives™ on Stack Overflow

Move rows to a different table with Html, AngularJS and Javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest