<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8" />
<link href="../../Content/bootstrap.min.css" target="_blank" rel="external nofollow" rel="stylesheet">
</head>
<body>
<table class="table table-striped table-hover text-center" id="sort">
<thead>
<tr>
<th width="20%" class="text-center">考勤排序序号</th>
<th width="20%" class="text-center">工号</th>
<th width="40%" class="text-center">姓名</th>
<th width="20%" class="text-center"></th>
</tr>
</thead>
<tbody>
<tr>
<td class="index">1</td>
<td>0507</td>
<td>王花花</td>
<td><span class="icon iconfont icon-zhedie-"></span></td>
</tr>
<tr>
<td class="index">2</td>
<td>0508</td>
<td>金靜芬</td>
<td><span class="icon iconfont icon-zhedie-"></span></td>
</tr>
<tr>
<td class="index">3</td>
<td>0509</td>
<td>王惠琴</td>
<td><span class="icon iconfont icon-zhedie-"></span></td>
</tr>
<tr>
<td class="index">4</td>
<td>0510</td>
<td>張玉萍</td>
<td><span class="icon iconfont icon-zhedie-"></span></td>
</tr>
<tr>
<td class="index">5</td>
<td>0511</td>
<td>林丹妮</td>
<td><span class="icon iconfont icon-zhedie-"></span></td>
</tr>
<tr>
<td class="index">6</td>
<td>0512</td>
<td>陳雅</td>
<td><span class="icon iconfont icon-zhedie-"></span></td>
</tr>
<tr>
<td class="index">7</td>
<td>0513</td>
<td>邵小玲</td>
<td><span class="icon iconfont icon-zhedie-"></span></td>
</tr>
<tr>
<td class="index">8</td>
<td>0514</td>
<td>黃鑫</td>
<td><span class="icon iconfont icon-zhedie-"></span></td>
</tr>
<tr>
<td class="index">9</td>
<td>0515</td>
<td>楊曉娜</td>
<td><span class="icon iconfont icon-zhedie-"></span></td>
</tr>
</tbody>
</table>
<script src="../../Scripts/jquery-1.10.1.min.js"></script>
<script src="../../Scripts/jquery-ui.js"></script>
<script src="../../Scripts/bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function()
//拖拽排序
var fixHelperModified = function(e, tr) {
var $originals = tr.children();
var $helper = tr.clone();
$helper.children().each(function(index) {
$(this).width($originals.eq(index).width())
});
return $helper;
},
updateIndex = function(e, ui) {
$('td.index', ui.item.parent()).each(function (i) {
$(this).html(i + 1);
});
};
$("#sort tbody").sortable({
helper: fixHelperModified,
stop: updateIndex
}).disableSelection();
})
</script>
</body>
</html>
![用jQuery實作一個簡易的聊天框[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)