jQuery实现的调整表格行tr上下顺序

作者：bea

表格是大家比较常用的元素，有时候表格中的行需要调整顺序，下面就通过代码实例介绍一下如何利用jquery实现此功能。代码实例如下: <!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>脚本之家</title><

表格是大家比较常用的元素，有时候表格中的行需要调整顺序，下面就通过代码实例介绍一下如何利用jquery实现此功能。

代码实例如下:


<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.softwhy.com/" />

<title>脚本之家</title>

<style type="text/css" >

table 

{

background:#F90;

width:400px;

line-height:20px;

}

td 

{

border-right:1px solid gray;

border-bottom:1px solid gray;

}

</style>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript" > 

function up(obj) 

{ 

var objParentTR=$(obj).parent().parent(); 

var prevTR=objParentTR.prev(); 

if(prevTR.length>0) 

{ 

prevTR.insertAfter(objParentTR); 

} 

} 

function down(obj) 

{ 

var objParentTR=$(obj).parent().parent(); 

var nextTR=objParentTR.next(); 

if(nextTR.length>0) 

{ 

nextTR.insertBefore(objParentTR); 

} 

} 

</script>

</head>

<body>

<table border="0" >

<tr>

<td>脚本之家一</td>

<td>脚本之家一</td>

<td>脚本之家一</td>

<td><a href="#" onclick="up(this)">上移</a> <a href="#" onclick="down(this)">下移</a></td>

</tr>

<tr>

<td>脚本之家二</td>

<td>脚本之家二</td>

<td>脚本之家二</td>

<td><a href="#" onclick="up(this)">上移</a> <a href="#" onclick="down(this)">下移</a></td>

</tr>

<tr>

<td>脚本之家三</td>

<td>脚本之家三</td>

<td>脚本之家三</td>

<td><a href="#" onclick="up(this)">上移</a> <a href="#" onclick="down(this)">下移</a></td>

</tr>

<tr>

<td>脚本之家四</td>

<td>脚本之家四</td>

<td>脚本之家四</td>

<td><a href="#" onclick="up(this)">上移</a> <a href="#" onclick="down(this)">下移</a></td>

</tr>

<tr>

<td>脚本之家五</td>

<td>脚本之家五</td>

<td>脚本之家五</td>

<td><a href="#" onclick="up(this)">上移</a> <a href="#" onclick="down(this)">下移</a></td>

</tr>

</table>

</body>

</html>

通过以上代码简单实现了jQuery实现的调整表格行tr上下顺序，希望本段代码可以帮助到大家。

有用 | 无用

jQuery实现的调整表格行tr上下顺序

猜你喜欢

您可能感兴趣的文章: