Move cells up/down in tables with rowspan in jquery

Question

I'm trying to create a table with a option of moving the cells up/down. but i have rowspan option in table mentioned below code. i have a problem in moving (up/down) the whole row with rowspan having problem. I have included my code below. can I get help on solving this 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"> 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());
            }
        });
    });

Hi Dani, the HTML which I have posted is the expected table format. do you see any syntax missing or going wrong here. — G.Esakki Raj, Jul 12 '16 at 17:03
No your syntax is good ... but to make more easier the movement of those groups of trs you can use multiples tbody's .... check this : https://jsfiddle.net/Lbbr4ad0/ — DaniP, Jul 12 '16 at 18:02

score 2 · Answer 1 · edited May 23 '17 at 11:46

One way you can do it is using multiple tbody's, grouping those tr with rowspan.

Then with Jquery you can easily move those 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"> 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>

Move cells up/down in tables with rowspan in jquery

1 Answers1