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