我准备了一个jsfiddle环境,只是为了向您展示我的问题。我想使用tablednd jquery插件或可能的替代方法/解决方法一起移动两行(红色的)。

有什么想法吗?

我知道我可以在tr / td中嵌套一个表,但是随后我将表头宽度td-alignments与根表放开了。

非常感谢。

<table border="1" id="table-1" cellpadding="5" cellspacing="0" class="grid">
<thead class="header nodrop">
  <th nowrap style="">Col0</th>
  <th nowrap style="">Col1</th>
  <th nowrap style="">Col2</th>
  <th nowrap style="">Col3</th>
  <th nowrap style="">Col4</th>
  <th nowrap style="">Col5</th>
  <th nowrap style="">Col6</th>
  <th nowrap style="">Col7</th>
</thead>
<tbody>
    <!-- first row group -->
        <tr id="1111" style="background-color:red;">
                <td>Text1.0</td>
                <td>Text1.1</td>
                <td>Text1.2</td>
                <td>Text1.3</td>
                <td>Text1.4</td>
                <td>Text1.5</td>
                <td>Text1.6</td>
                <td>Text1.7</td>
        </tr>
        <tr id="1111" style="background-color:red;">
              <td colspan="8">this row belongs to ROW ID 1111 above red</td>
        </tr>
    <!-- second row group -->
        <tr id="2222">
                <td>Text2.0</td>
                <td>Text2.1</td>
                <td>Text2.2</td>
                <td>Text2.3</td>
                <td>Text2.4</td>
                <td>Text2.5</td>
                <td>Text2.6</td>
                <td>Text2.7</td>
        </tr>
        <tr id="2222">
              <td colspan="8">this row belongs to ROW ID 2222 above white</td>
        </tr>
</tbody></table>


http://jsfiddle.net/vbnyfapt/5/

最佳答案

终于我解决了!

    $("#table-1").sortable({
    helper: function(e, ui) {
         ui.children().each(function() {
             $(this).width($(this).width());
         });
         return ui;
    },
    items: "tbody"
}).disableSelection();


http://jsfiddle.net/cfv6tbd0/

关于javascript - jQuery tablednd一起移动两行,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/31439836/

10-12 00:06
查看更多