使用jQuery UI可以与HTML表进行排序 [英] Using jQuery UI sortable with HTML tables
本文介绍了使用jQuery UI可以与HTML表进行排序的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想在HTML表格中输出数据库中的一些数据,我希望用户能够重新排序表格行。为实现这一目标,我使用jQuery UI进行排序,因此:
I want to output some data from the database in a HTML table, and I want the user to be able to reorder table rows. To achieve this, I used jQuery UI sortable, thus:
<script>
$(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
});
</script>
<?php
while($row = mysql_fetch_assoc($co_authors)) {
echo "<tr id='sortable'><td>{$row['author_email']}</td>
<td>{$row['coauthor_level']}</td>";
<td><button class='remove' id='remove' name='remove' email="<?php echo $row['author_email'] ?>"
paper="<?php echo $row['paper_id'] ?>">Remove</button></td>
</tr>";
}
?>
<问题是当我拖动表 tr
时,只拖动 td
。此外,最重要的是,只有第一行是可拖动的:效果不适用于其他行。我该如何解决?
The problem is that when I drag a table tr
, only td
are dragged. Also, and most importantly, only the first row is dragable: the effect is not applied to other rows. How can I solve this?
推荐答案
你可以打电话< tbody>
上的可排序
,而不是单个行。
You can call sortable
on a <tbody>
instead of on the individual rows.
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
</tbody>
</table>
<script>
$('tbody').sortable();
</script>
$(function() {
$( "tbody" ).sortable();
});
table {
border-spacing: collapse;
border-spacing: 0;
}
td {
width: 50px;
height: 25px;
border: 1px solid black;
}
<link href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-1.11.1.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
</tr>
</tbody>
</table>
这篇关于使用jQuery UI可以与HTML表进行排序的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文