我尝试创建一个可以向上/向下移动单元格的表格。 但我在下面提到的表中有rowspan选项代码。我有一个问题是移动(上/下)整行有rowpan有问题。我在下面提供了我的代码。我可以帮助解决这个问题。
<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());
}
});
});
答案 0 :(得分:2)
您可以使用multiple tbody's的一种方法,将那些tr
与rowspan分组。
然后使用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>