javascript - 在 jquery 中使用 rowspan 向上/向下移动表格中的单元格

Question

我正在尝试创建一个带有上/下移动单元格选项的表格。 但我在下面提到的代码表中有 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

一种方法是使用 multiple tbody's ，使用 rowspan 将这些 tr 分组。

然后使用 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>