jqueryのrowspanを使用してテーブル内でセルを上下に移動

Question

セルを上下に移動するオプションを使用してテーブルを作成しようとしています。 しかし、私はrowspanオプションを以下のコードで述べるテーブルに持っています。私は問題を持つrowspanで行全体（上下）に問題があります。私は以下のコードを含んでいます。この問題を解決するための助けを得ることができますか？

<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

あなたはそれがROWSPAN持つものtrをグループ化し、multiple tbody'sを使用している行うことができます一つの方法。

は、次にjQueryを使って、あなたは簡単にこれらの要素を移動することができます。

$(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>