Zellen in Tabellen mit rowspan in jquery nach oben/unten bewegen

Question

Ich versuche, eine Tabelle mit einer Option zum Verschieben der Zellen nach oben/unten zu erstellen. aber ich habe rowspan Option in Tabelle unten genannten Code. Ich habe ein Problem beim Bewegen (hoch/runter) der ganzen Reihe mit rowspan mit Problem. Ich habe meinen Code unten eingefügt. kann ich Hilfe bei der Lösung dieses Problems bekommen?

<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"> one as 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 as 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"> one as 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()); 
      } 
     }); 
    }); 

Answer 1

Ein Weg, können Sie es multiple tbody's verwendet, jene tr mit rowspan Gruppierung.

Dann mit JQuery können Sie leicht die Elemente bewegen:

$(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"> one as 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 as 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"> one as 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>