Question

我尝试创建一个可以向上/向下移动单元格的表格。但我在下面提到的表中有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());
            }
        });
    });

Answer 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>

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

1 个答案: