<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript">
var row1Color = "#66CC99";
var row2Color = "#FFCC99";
var selRowColor = "#999999";
/**
*初始化选中行颜色
*/
function doInitRowColor(){
$("span").each(function(i){
setRowColor($(this),i);
});
}
/**
*设置被选中行颜色
*/
function selectRow(row){
$(row).children().attr("bgcolor", selRowColor);
}
/**
*设置当前行颜色
*/
function setRowColor(row,i){
if(i%2==0){
$(row).children().attr("bgcolor", row1Color);
}else{
$(row).children().attr("bgcolor", row2Color);
}
}
/**
* 选中一行事件
*/
function doSelectRow(row){
$("span").each(function(i){
if( $(row).attr("id") == $(this).attr("id") ){
selectRow($(this) );
}else{
setRowColor($(this),i);
}
});
}
//选择上下
function up(){
$.each($(),function(){
var onthis=$(this).parent().parent();
var getUp=onthis.prev();
$(onthis).after(getUp);
});
}
function down(){
$.each($("getSelected"),function(){
var onthis=$(this).parent().parent();
var getdown=onthis.next();
$(getdown).after(onthis);
});
}
//当DOM载入就绪可以查询及操纵时绑定
$(document).ready(function(){
doInitRowColor();
doSelectRow($("span").first() );
});
</script>
</head>
<body >
<div>
<input type="button" onclick="up();" value="up"></input>
<input type="button" onclick="down();" value="down"></input>
</div>
<table width="600" border="1">
<tr>
<td>
<table width="100%">
<tr>
<td width="30%">编号</td>
<td width="30%">姓名</td>
<td> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<div style="width:100%; height:117px; overflow:auto;" >
<table width="100%">
<tr>
<td>
<span id="001" onclick="doSelectRow(this)" >
<table width="100%" bgcolor="" >
<tr>
<td width="30%">001</td>
<td width="30%">李一</td>
<td>more...</td>
</tr>
</table>
</span>
</td>
</tr>
<tr>
<td>
<span id="002" onclick="doSelectRow(this)" >
<table width="100%" >
<tr>
<td width="30%">002</td>
<td width="30%">李二</td>
<td>more...</td>
</tr>
</table>
</span>
</td>
</tr>
<tr>
<td>
<span id="003" onclick="doSelectRow(this)" >
<table width="100%">
<tr>
<td width="30%">003</td>
<td width="30%">李三</td>
<td>more...</td>
</tr>
</table>
</span>
</td>
</tr>
<tr>
<td>
<span id="013" onclick="doSelectRow(this)" >
<table width="100%" >
<tr>
<td width="30%">013</td>
<td width="30%">张平一</td>
<td>more...</td>
</tr>
</table>
</span>
</td>
</tr>
<tr>
<td>
<span id="015" onclick="doSelectRow(this)" >
<table width="100%">
<tr>
<td width="30%">015</td>
<td width="30%">王一平</td>
<td>more...</td>
</tr>
</table>
</span>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<br/>
<br/>
</body>
</html>
easyUI点击按钮后上下移动功能
5星 · 超过95%的资源 需积分: 12 112 浏览量
2013-11-15
09:34:22
上传
评论 1
收藏 191KB RAR 举报 
test2.rar （41个子文件） 
test2 
.project 1KB .mymetadata 288B src WebRoot WEB-INF classes lib web.xml 375B index.jsp 834B demo 
good.html 3KB new jquery.js 157KB 7.html 3KB META-INF MANIFEST.MF 39B datagrid datagrid_data1.json 1KB javascript jquery.easyui.min.js 290KB move.js 0B jquery-1.4.2.min.js 71KB jquery-1.8.0.min.js 90KB show.html 1KB css css.css 365B themes demo.css 387B icons 
reload.png 1KB edit_remove.png 625B cut.png 1024B sum.png 289B
blank.gif 43B redo.png 708B pencil.png 713B filesave.png 898B tip.png 743B back.png 912B edit_add.png 1KB mini_refresh.png 160B mini_edit.png 161B no.png 922B search.png 813B print.png 1KB Thumbs.db 24KB cancel.png 1KB help.png 1KB mini_add.png 244B ok.png 883B undo.png 707B icon.css 2KB easyui.css 43KB .myeclipse .classpath 340B
- 1
- 2
前往页