Question

如何移动整个html表？我发现了许多行或列移动的示例。我找不到任何可移动的桌子。我的意思是，如果我有三个表（1,2,3），我想更改其顺序，并根据需要更改其位置。我的表具有相同的类，但ID不同。它们的行和列数也相同。

请询问是否不清楚。

下面是示例代码：Fiddle。

<table class="tbstyle" id="table1">
<tr><th colspan="4">Table1</tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
</table>


<table class="tbstyle" id="table2">
<tr><th colspan="4">Table2</tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
</table>


<table class="tbstyle" id="table3">
<tr><th colspan="4">Table3</tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
</table>

和CSS：

.tbstyle {
 border: 1px solid black;
 margin:10px;
 float:left;
}

.tbstyle td, th {
   border: 1px solid black;
}

Answer 1

您可以使用可排序的jQuery UI

    $( "#sortable" ).sortable();

#sortable > div {
  width:300px; float:left;
}

  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
 <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <div id="sortable">  
  <div class="ui-state-default">
 
  <table class="tbstyle" id="table1">
<tr><th colspan="4">Table1</tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
</table>
</div>
  <div class="ui-state-default">

<table class="tbstyle" id="table2">
<tr><th colspan="4">Table2</tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
</table>
</div>
  <div class="ui-state-default">

<table class="tbstyle" id="table3">
<tr><th colspan="4">Table3</tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
</table> </div>
  </div>

移动HTML表格（对位置进行排序/重新排序）

1 个答案: