Html
    Css
    Js

    
                        
table.grid {
	border:1px solid #188ffe;
	margin:10px;
}
table.grid th {
	text-align:center;
	font-weight:bold;
	background-color:#188ffe;
	color:#fff;
	padding:5px;
}
table.grid a {
	padding:0px 5px;
}
table.grid a:link {
	text-decoration:none;
}
table.grid tr td {
	border-top:1px solid #e2ecff;
	border-left:1px solid #e2ecff;
	border-bottom:1px solid #a0cffe;
	border-right:1px solid #a0cffe;
	padding:3px 5px;
}
table.grid tr:nth-child(even) {
	background-color:#efefef;
}
.trh {
	height:0px;
	overflow:hidden;
}
.ccup,.ccdown {
	cursor:pointer;
}
.opFly {
	position:absolute;
	z-index:999;
	border-style:solid;
	border-left-color:#eef7fd;
	border-top-color:#eef7fd;
	border-right-color:#d3e9fc;
	border-bottom-color:#d3e9fc;
	background-color:#deeffc;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.9.1
 立即下载

jQuery表格行上下移动(带过渡效果)

网上找的table表格行上移下移都只是简单的把整行tr元素与相邻的before一下,实现位置交换而已。
上一个项目中客户提出不直观,不仔细看还不知道已经点过上移操作了,所以自己实现了一下过渡效果。
由于不是经常玩前台,想参考网上一些例子用 div和 ul li 去实现,结果发现table下不能这么整,还有tr 行的height这个高度直接改成0还不起效,经历了些麻烦,希望有朋友需要的直接拿去用或参考,少走些弯路。

0