|
#2
gupiao1752010-10-18 10:28
|
程序代码：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>jQuery UI Sortable - Display as grid</title>
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="ui/jquery-1.4.2.js"></script>
<script type="text/javascript" src="ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="ui/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="ui/jquery.ui.sortable.js"></script>
<script type="text/javascript" src="ui/jquery-ui-1.8.4.custom.js"></script>
<style>
.class_1{
border: 1px solid #FF0000;
}
</style>
</head>
<body>
<div id="div_tbl" style="position:absolute;left:100px;">
<table cellspacing="1" cellpadding="0" id="tt">
<thead>
<tr>
<th>姓名</th><th>性别</th><th>学号</th>
</tr>
</thead>
<tbody>
<tr id="1">
<td>a</td><td>男</td><td>2</td>
</tr>
<tr id="2">
<td>b</td><td>男</td><td>3</td>
</tr>
<tr id="3">
<td>bv</td><td>男</td><td>1</td>
</tr>
</tbody>
</table>
</div>
</body>
<script type="text/javascript">
$(function(){
//实现拖动行重新排序功能
$("tbody").sortable({stop:function(event, ui){
//stop事件是在完成重新排序后触发的事件
//在此只简单显示被拖放行的id值
alert(ui.item.attr("id"));
}});
//区分奇偶行背景色
$("tbody>tr:odd").css("background","red");
$("tbody>tr:even").css("background","green");
});
</script>
</html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>jQuery UI Sortable - Display as grid</title>
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="ui/jquery-1.4.2.js"></script>
<script type="text/javascript" src="ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="ui/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="ui/jquery.ui.sortable.js"></script>
<script type="text/javascript" src="ui/jquery-ui-1.8.4.custom.js"></script>
<style>
.class_1{
border: 1px solid #FF0000;
}
</style>
</head>
<body>
<div id="div_tbl" style="position:absolute;left:100px;">
<table cellspacing="1" cellpadding="0" id="tt">
<thead>
<tr>
<th>姓名</th><th>性别</th><th>学号</th>
</tr>
</thead>
<tbody>
<tr id="1">
<td>a</td><td>男</td><td>2</td>
</tr>
<tr id="2">
<td>b</td><td>男</td><td>3</td>
</tr>
<tr id="3">
<td>bv</td><td>男</td><td>1</td>
</tr>
</tbody>
</table>
</div>
</body>
<script type="text/javascript">
$(function(){
//实现拖动行重新排序功能
$("tbody").sortable({stop:function(event, ui){
//stop事件是在完成重新排序后触发的事件
//在此只简单显示被拖放行的id值
alert(ui.item.attr("id"));
}});
//区分奇偶行背景色
$("tbody>tr:odd").css("background","red");
$("tbody>tr:even").css("background","green");
});
</script>
</html>