javascript - 从许多选定的表格行到一个 div 标签

Question

使用 jQuery 中的可选小部件，我制作了一个函数来选择表格中的行。现在我希望选定的行将一起形成一个 div 标签(不多，只有一个大 div)和 div 标签以便能够添加其他功能，如可拖动和可调整大小，如何做到这一点？

jsFiddle

jQuery("#wrapper>table>tbody").bind("mousedown", function(e) {
  e.metaKey = false;
}).selectable({
  filter: "td",
  stop: function( event, ui ) {
    jQuery( ".ui-selected").addClass('todiv');
  }
}); 

<div id="wrapper">
  <table>
    <col width="9%">
    <thead>
      <tr>
        <th colspan="2">&nbsp;</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th rowspan="2">&nbsp;</th>
        <td>&nbsp;</td>
      </tr>
      <tr> 
        <td>&nbsp;</td>
      </tr>
      <tr>
        <th rowspan="2">&nbsp;</th>
        <td>&nbsp;</td>
      </tr>
      <tr> 
        <td>&nbsp;</td>
      </tr>
    </tbody>
  </table>
</div>

table,th,tr,td { border: 1px solid black; }

.ui-selectable .ui-selected { background-color: #a6c9e2; }
.ui-selectable .ui-selecting { background: #FECA40; }

.todiv { background-color: green; }

Answer 1

你可以像这样克隆它们并放入一些容器中:

var selected = $('#wrapper .todiv');
$('#rowsContainer').empty().append(selected.clone());

但它们看起来不像表格中的行，如果需要，您需要为它们准备单独的样式。

JSFiddle