javascript - Move cells up/down in tables with rowspan in jquery -

i'm trying create table option of moving cells up/down. have rowspan option in table mentioned below code. have problem in moving (up/down) whole row rowspan having problem. have included code below. can on solving issue.

<table id = "customtable" border="1">     <tbody>         <tr class="oddrow">             <td rowspan="3">one</td>             <td rowspan="3">                 <img alt="up" src="blue_shiftup.png" class="up" />                  <img alt="down" src="blue_shiftdown.png" class="down" />             </td>             <td>11</td>             <td>12</td>             <td>13</td>             <td rowspan="3"> 1 last cell</td>         </tr>         <tr class="oddrow">             <td>14</td>             <td>15</td>             <td>16</td>         </tr>         <tr class="oddrow">             <td>17</td>             <td>18</td>             <td>19</td>         </tr>         <tr class="oddrow">             <td rowspan="3">two</td>             <td rowspan="3">                 <img alt="up" src="blue_shiftup.png" class="up" />                  <img alt="down" src="blue_shiftdown.png" class="down" />             </td>             <td>21</td>             <td>22</td>             <td>23</td>             <td rowspan="3"> second last cell</td>         </tr>         <tr class="oddrow">             <td>24</td>             <td>25</td>             <td>26</td>         </tr>         <tr class="oddrow">             <td>27</td>             <td>28</td>             <td>29</td>         </tr>         <tr class="oddrow">             <td rowspan="3">three</td>             <td rowspan="3">                 <img alt="up" src="blue_shiftup.png" class="up" />                  <img alt="down" src="blue_shiftdown.png" class="down" />             </td>             <td>31</td>             <td>32</td>             <td>33</td>             <td rowspan="3"> 1 last cell</td>         </tr>         <tr class="oddrow">             <td>34</td>             <td>35</td>             <td>36</td>         </tr>         <tr class="oddrow">             <td>37</td>             <td>38</td>             <td>39</td>         </tr>     </tbody> </table> 

var $j = jquery.noconflict();     $j(document).ready(function(){         $j(".up,.down").click(function(){             var row = $j(this).parents("#customtable tbody tr:first");             if ($j(this).is(".up")) {                 row.insertbefore(row.prev());             } else {                 row.insertafter(row.next());             }         });     }); 

one way can using multiple tbody's, grouping tr rowspan.

then jquery can move elements:

$(document).ready(function() {    $(".up, .down").click(function() {      var par = $(this).parents("tbody");      if ($(this).is(".up")) {        par.insertbefore(par.prev());      } else {        par.insertafter(par.next());      }    });  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <table id="customtable" border="1">    <tbody>      <tr class="oddrow">        <td rowspan="3">one</td>        <td rowspan="3">          <img alt="up" src="blue_shiftup.png" class="up" />          <img alt="down" src="blue_shiftdown.png" class="down" />        </td>        <td>11</td>        <td>12</td>        <td>13</td>        <td rowspan="3"> 1 last cell</td>      </tr>      <tr class="oddrow">        <td>14</td>        <td>15</td>        <td>16</td>      </tr>      <tr class="oddrow">        <td>17</td>        <td>18</td>        <td>19</td>      </tr>      </tbody><tbody>      <tr class="oddrow">        <td rowspan="3">two</td>        <td rowspan="3">          <img alt="up" src="blue_shiftup.png" class="up" />          <img alt="down" src="blue_shiftdown.png" class="down" />        </td>        <td>21</td>        <td>22</td>        <td>23</td>        <td rowspan="3"> second last cell</td>      </tr>      <tr class="oddrow">        <td>24</td>        <td>25</td>        <td>26</td>      </tr>      <tr class="oddrow">        <td>27</td>        <td>28</td>        <td>29</td>      </tr>      </tbody><tbody>      <tr class="oddrow">        <td rowspan="3">three</td>        <td rowspan="3">          <img alt="up" src="blue_shiftup.png" class="up" />          <img alt="down" src="blue_shiftdown.png" class="down" />        </td>        <td>31</td>        <td>32</td>        <td>33</td>        <td rowspan="3"> 1 last cell</td>      </tr>      <tr class="oddrow">        <td>34</td>        <td>35</td>        <td>36</td>      </tr>      <tr class="oddrow">        <td>37</td>        <td>38</td>        <td>39</td>      </tr>    </tbody>  </table>