title: How to move row to the very top or bottom with jquery
body: <p>I am trying to manipulate a table left, right, very top, very bottom with jquery</p>
  
  <p>In my JavaScript I have:</p>
  
  <pre><code>row = $(this).parents("tr:first");
          if ($(this).is(".icon-arrow-up")) {
            row.insertBefore(row.prev());
          }
          if ($(this).is(".icon-arrow-down")) {
            row.insertAfter(row.next());
          }
          if ($(this).is(".icon-arrow-left")) {
            row.insertAfter;
          }
          if ($(this).is(".icon-arrow-right")) {
            return row.insertBefore;
  </code></pre>
  
  <p>And in my html:</p>
  
  <pre><code>&lt;div id="arrangevideos" class="modal hide fade" aria-hidden="true"&gt;
      &lt;table class="table"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;Isrc&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
              &lt;tr ng-animate="'table-anim'" ng-repeat="isrc in videolist track by $index"&gt;
                  @*&lt;tr ng-animate="'table-anim'" ng-repeat="isrc in videolist"&gt;*@
                  &lt;td&gt;{{isrc}}&lt;/td&gt;
                  &lt;td&gt;
                      &lt;i class="icon-arrow-left"&gt;&lt;/i&gt;
                      &lt;i class="icon-arrow-up"&gt;&lt;/i&gt;
                      &lt;i class="icon-arrow-down"&gt;&lt;/i&gt;
                      &lt;i class="icon-arrow-right"&gt;&lt;/i&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
      &lt;button type="button" class="btn btn-danger" data-dismiss="modal" aria-hidden="true"&gt;Close&lt;/button&gt;
  
  
  &lt;/div&gt;
  </code></pre>
  
  <p>The up and down arrow works perfectly fine but I can’t seem to move a row to the very top or the very bottom with the icon-arrow-left and icon-arrow-right.</p>
  
  <p>What is wrong here?</p>