title: Move rows to a different table with Html, AngularJS and Javascript
body: <p>I was wondering  if it's possible to move one table row to a different table using Html, AngularJs and Javascrpit.</p>
  
  <p>Here is an example: </p>
  
  <p>-I have a table with tasks I have to do.</p>
  
  <p><a href="https://i.stack.imgur.com/wnURr.jpg" rel="nofollow noreferrer">Before moving row</a></p>
  
  <p>-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.</p>
  
  <p><a href="https://i.stack.imgur.com/iFqj4.jpg" rel="nofollow noreferrer">After moving row</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;title&gt;TASKS&lt;/title&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div&gt;
     &lt;h3&gt;To do&lt;/h3&gt;
     &lt;table class="table table-striped table-hover col-sm-4"&gt;
         &lt;thead&gt;
             &lt;tr&gt;
                &lt;th&gt;Task&lt;/th&gt;
                &lt;th&gt;Time&lt;/th&gt;
                &lt;th&gt;Done&lt;/th&gt;
             &lt;/tr&gt;
         &lt;/thead&gt;
         &lt;tbody&gt;
             &lt;tr&gt;
                &lt;th&gt;Task_One&lt;/th&gt;
                &lt;th&gt;5 min&lt;/th&gt;
                &lt;th&gt;&lt;input type="checkbox" unchecked&gt;&lt;/th&gt;
             &lt;/tr&gt;
             &lt;tr&gt;
                &lt;th&gt;Task_Two&lt;/th&gt;
                &lt;th&gt;2 min&lt;/th&gt;
                &lt;th&gt;&lt;input type="checkbox" unchecked&gt;&lt;/th&gt;
             &lt;/tr&gt;
             &lt;tr&gt;
                &lt;th&gt;Task_Three&lt;/th&gt;
                &lt;th&gt;2 min&lt;/th&gt;
                &lt;th&gt;&lt;input type="checkbox" unchecked&gt;&lt;/th&gt;
             &lt;/tr&gt;
         &lt;/tbody&gt;
     &lt;/table&gt;
     
     &lt;h3&gt;Done&lt;/h3&gt;
     &lt;table class="table table-striped table-hover col-sm-4"&gt;
         &lt;thead&gt;
             &lt;tr&gt;
                &lt;th&gt;Task&lt;/th&gt;
                &lt;th&gt;Time&lt;/th&gt;
                &lt;th&gt;Done&lt;/th&gt;
             &lt;/tr&gt;
         &lt;/thead&gt;
         &lt;tbody&gt;
             
             
         &lt;/tbody&gt;
     &lt;/table&gt;
  
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>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.</p>