Question

使用来自jQuery的可选小部件，我创建了一个选择表中行的函数。现在我希望选定的行将形成一个div标签（不是很多，只有一个大div）和div标签，以便能够添加另一个功能，如draggable和resizable，如何做到这一点？

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

从许多选定的表行到一个div标记

1 个答案: