在jquery中使用rowspan在表格中向上/向下移动单元格答案

【问题标题】：Move cells up/down in tables with rowspan in jquery在jquery中使用rowspan在表格中向上/向下移动单元格
【发布时间】：2016-11-14 20:12:09
【问题描述】：

我正在尝试创建一个带有向上/向下移动单元格选项的表格。但我在下面的代码中提到的表中有行跨度选项。我在移动（上/下）整行时遇到问题，行跨度有问题。我在下面包含了我的代码。我可以得到解决这个问题的帮助吗？

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

【问题讨论】：

你能修改你的html吗？
嗨 Dani，我发布的 HTML 是预期的表格格式。您是否看到这里有任何语法缺失或出错。
不，你的语法很好......但是为了让这些 trs 组的移动更容易，你可以使用 multiples tbody's .... 检查这个：jsfiddle.net/Lbbr4ad0
感谢 Dani，它适用于您提到的更改。
很高兴帮助你..作为答案发布

标签： javascript jquery html html-table

【解决方案1】：

一种方法是使用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>

【讨论】：