jquery调整表格行tr上下顺序实例讲解
表格是大家比较常用的元素，有时候表格中的行需要调整顺序，下面就通过代码实例介绍一下如何利用jquery实现此功能，分享给大家供大家参考，具体内容如下
代码实例如下:
<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>
以上代码实现了我们的要求，代码比较简单，这里就不多介绍了。
希望本文所述对大家学习javascript程序设计有所帮助。
-
本文向大家介绍jQuery实现的调整表格行tr上下顺序，包括了jQuery实现的调整表格行tr上下顺序的使用技巧和注意事项，需要的朋友参考一下 表格是大家比较常用的元素，有时候表格中的行需要调整顺序，下面就通过代码实例介绍一下如何利用jquery实现此功能。 代码实例如下: 通过以上代码简单实现了jQuery实现的调整表格行tr上下顺序，希望本段代码可以帮助到大家。
-
本文向大家介绍jQuery实现调整表格单列顺序完整实例，包括了jQuery实现调整表格单列顺序完整实例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery实现调整表格单列顺序的方法。分享给大家供大家参考，具体如下： 更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery表格(table)操作技巧汇总》、《jQuery常用插件及用法总结》、《jquery中Ajax用法
-
本文向大家介绍jQuery 调用WebService 实例讲解，包括了jQuery 调用WebService 实例讲解的使用技巧和注意事项，需要的朋友参考一下 1.首先建一个WebService程序 [System.Web.Script.Services.ScriptService] 这里得注意，默认情况下这个特性是注释起来的，如果想用Javascript来调用WebService 就要取消这
-
本文向大家介绍jQuery实现可编辑的表格实例讲解（2），包括了jQuery实现可编辑的表格实例讲解（2）的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了jQuery实现可编辑表格的具体代码，供大家参考，具体内容如下 我们最终要达到的效果如下： 当单击学号列的时候，可以进行编辑： 当单击ESC的时候，操作取消，当单击回车的时候，修改生效（没有与后台交互） 页面代码如下（asp.net
-
本文向大家介绍bootstrap表格分页实例讲解，包括了bootstrap表格分页实例讲解的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了bootstrap表格分页的具体实现代码，供大家参考，具体内容如下 引用： html代码： js代码： 后台对应的方法 最终的效果 方便以后可以用到。 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
本文向大家介绍jQuery实现的可编辑表格完整实例，包括了jQuery实现的可编辑表格完整实例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery实现的可编辑表格。分享给大家供大家参考，具体如下： 更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery表格(table)操作技巧汇总》、《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQue