JQuery实现置顶、置底、向上、向下、取消排序功能

最新推荐文章于 2023-04-01 16:31:10 发布
最新推荐文章于 2023-04-01 16:31:10 发布
阅读量5.7k 收藏 2
点赞数 1
分类专栏： jquery 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aaalk1001/article/details/53765555
版权 
<!DOCTYPE html>
<html>
<head>
<title>sort.html</title>
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
</head>
<body>
	<table border="1" cellpadding="10" cellspacing="0">
		<thead>
			<tr>
				<th>序号</th>
				<th>内容</th>
				<th>排序</th>
			</tr>
		</thead>
		<tbody class="table">
			<tr>
				<td>1</td>
				<td>内容一</td>
				<td><a href="javascript:void(0)" class="top">置顶</a> <a
					href="javascript:void(0)" class="upbtn">上</a> <a
					href="javascript:void(0)" class="downbtn">下</a> <a
					href="javascript:void(0)" class="bottom">置底</a></td>
			</tr>
			<tr>
				<td>2</td>
				<td>内容二</td>
				<td><a href="javascript:void(0)" class="top">置顶</a> <a
					href="javascript:void(0)" class="upbtn">上</a> <a
					href="javascript:void(0)" class="downbtn">下</a> <a
					href="javascript:void(0)" class="bottom">置底</a></td>
			</tr>
			<tr>
				<td>3</td>
				<td>内容三</td>
				<td><a href="javascript:void(0)" class="top">置顶</a> <a
					href="javascript:void(0)" class="upbtn">上</a> <a
					href="javascript:void(0)" class="downbtn">下</a> <a
					href="javascript:void(0)" class="bottom">置底</a></td>
			</tr>
			<tr>
				<td>4</td>
				<td>内容四</td>
				<td><a href="javascript:void(0)" class="top">置顶</a> <a
					href="javascript:void(0)" class="upbtn">上</a> <a
					href="javascript:void(0)" class="downbtn">下</a> <a
					href="javascript:void(0)" class="bottom">置底</a></td>
			</tr>
			<tr>
				<td>5</td>
				<td>内容五</td>
				<td><a href="javascript:void(0)" class="top">置顶</a> <a
					href="javascript:void(0)" class="upbtn">上</a> <a
					href="javascript:void(0)" class="downbtn">下</a> <a
					href="javascript:void(0)" class="bottom">置底</a></td>
			</tr>
		</tbody>
	</table>
	<a href="javascript:void(0)" οnclick="javascript:cancleRank();">取消排序</a>
</body>
<script type="text/javascript">
$(document).ready(function () {
	//上移
	var $upbtn = $(".upbtn")
	$upbtn.click(function() {
		var $tr = $(this).parents("tr");
		if ($tr.index() != 0) {
			$tr.fadeOut().fadeIn();
			$tr.prev().before($tr);
			$tr.css("color","#f60");
			colorcancel();
		}
	});
	//下移
	var $downbtn = $(".downbtn");
	var len = $downbtn.length;
	$downbtn.click(function() {
		var $tr = $(this).parents("tr");
		if ($tr.index() != len - 1) {
			$tr.fadeOut().fadeIn();
			$tr.next().after($tr);
			$tr.css("color","#f60");
			colorcancel();
		}
	});
	//置顶
	var $top = $(".top");
	$top.click(function(){
		var $tr = $(this).parents("tr");
		if ($tr.index() != 0) {
			$tr.fadeOut().fadeIn();
			$("tbody").prepend($tr);
			$tr.css("color","#f60");
			colorcancel();
		}
	});
	//置底
	var $bottom = $(".bottom");
	var length = $bottom.length;
	$bottom.click(function(){
		var $tr = $(this).parents("tr");
		if ($tr.index() != length-1) {
			$tr.fadeOut().fadeIn();
			$("tbody").append($tr);
			$tr.css("color","#f60");
			colorcancel();
		}
	});
});
//初始化列表
var initList = [], domArr = [];
$('tbody tr').each(function(a){
	initList[a] = $(this).html();
})
      //取出所有tr放进数组
      function getDom(){
          $('tbody tr').each(function( m ){
              domArr[m] = $(this);
          });
      }
//取消排序
function cancleRank(){
	getDom();
	$.each(initList,function(b){
		$.each(domArr,function(c){
			if(domArr[c].html() == initList[b]){
				$('table tbody').append(domArr[c]);
			}
		});
	});
	$('tbody tr').each(function(){
		$(this).css("color","");
	})
}
//取消颜色高亮
function colorcancel(){
	$('tbody tr').each(function(){
		var index = $(this).index()+1;
		var serialnumber = $(this).find("td:first").text();
		if(index == serialnumber){
			$(this).css("color","");
		}
	});
}
</script>
</html>









                

        

        

    




    

      

        

            

              
                
                  IT后浪
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    1
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    2
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                  1
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
html页面置顶置底

				
			

			

				

					08-09
				

			

		

		

			
				
把鼠标悬浮在置顶置底的图片上，页面就会往对应的方向进行移动，点击直接到顶部或底部

			
		

	



                

              
                



	

		

			

				
					
Jquery实现由下向上展开效果的例子

				
			

			

				

					10-25
				

			

		

		

			
				
主要介绍了Jquery实现由下向上展开效果的例子,本文同时讲解了向下展开的例子,需要的朋友可以参考下

			
		

	



                


  
              

                


	

		

			

				
					
jq实现元素置顶排序功能

				
			

			

				

					chen_ac的博客
				

				

					04-01
					
					376
					
				

			

		

		

			
				
jq实现元素置顶排序功能

			
		

	





	

		

			

				
					
jquery实现页面置顶功能代码

				
			

			

				

					weixin_30624825的博客
				

				

					11-26
					
					512
					
				

			

		

		

			
				
<html>
<head>
 <title></title><script type='text/javascript>
//回到顶部功能  
function gotoTop(min_height) {
    $("#toTop").click(//定义返回顶部点击向上滚动的动画
        functi...

			
		

	



		

			
		



	

		

			

				
					
jQuery-使页面回到顶部

				
			

			

				

					diaoweisang7683的博客
				

				

					06-16
					
					91
					
				

			

		

		

			
				
1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 6     <title&g...

			
		

	





	

		

			

				
					
js操作数组顺序——置顶

				
			

			

				

					小旭的博客
				

				

					09-06
					
					5804
					
				

			

		

		

			
				
1、js数组置顶元素置顶


myAppList：即要操作的数组
index：要置顶的元素序号

function upIndex(myAppList,index) {// 置顶
	if (index == 0) {
		return;
	}
	swapItems(myAppList, index, 0);
}

index2：要替换至第几位
var swapItems = function(ar...

			
		

	





	

		

			

				
					
基于jQuery实现的网站漂浮置顶和置底特效源码.zip

				
			

			

				

					11-21
				

			

		

		

			
				
【jQuery实现的网站漂浮置顶与置底特效详解】  jQuery是一个轻量级的JavaScript库，它极大地简化了JavaScript的DOM操作，事件处理，动画设计以及Ajax交互。在本项目中，"基于jQuery实现的网站漂浮置顶和置底特效源码...

			
		

	





	

		

			

				
					
jQuery实现点击关注和取消功能

				
			

			

				

					10-19
				

			

		

		

			
				
点赞，网络用语，表示“赞同”、“喜爱”。今天小编通过实例代码给大家分享jQuery实现点击关注和取消功能，需要的朋友参考下吧

			
		

	





	

		

			

				
					
jquery实现的table排序功能示例

				
			

			

				

					12-02
				

			

		

		

			
				
本文实例讲述了jquery实现的table排序功能。分享给大家供大家参考，具体如下：  <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content=...

			
		

	





	

		

			

				
					
Jquery实现上下移动和排序代码

				
			

			

				

					11-27
				

			

		

		

			
				
下文为大家介绍下Jquery实现上下移动和排序,感兴趣的朋友可以了解一下。  解决问题  代码实现：   <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> &...

			
		

	





	

		

			

				
					
JS技术实现动态置顶、置底、上移、下移

				
			

			

				

					08-07
				

			

		

		

			
				
使用JS技术实现数据行的动态置顶、置底、上移、下移

			
		

	





	

		

			

				
					
置顶和置底的js

				
			

			

				

					09-14
				

			

		

		

			
				
置顶和置底的js

			
		

	





	

		

			

				
					
jquery实现列表左右上下排序

				
			

			

				

					07-09
				

			

		

		

			
				
里面有两个文件，jquery-1.4.2.min.js另外一个是xialalrtb.html这两个文件，打开xialalrtb.html就可以成功运行

			
		

	





	

		

			

				
					
jquery导航置顶

				
			

			

				

					qq_36818077的博客
				

				

					10-07
					
					199
					
				

			

		

		

			
				
<!DOCTYPEhtml>

<htmllang="en">

<head>

<metacharset="UTF-8">

<metaname="viewport"content="width=device-width,initial-scale=1.0">

<title>Document</title>

</head>

<style>

*{

...

			
		

	





	

		

			

				
					
jquery中的置顶，置底，向上，向下的排序功能

				
			

			

				

					weixin_30929195的博客
				

				

					01-18
					
					513
					
				

			

		

		

			
				
css

.selectedLi{background: #f0ad4e;color:#fff;}

html部分

<ul class="seetSelect2" id='sysAllSet'>
　　<li value="1" index='1'>集团考核保障</li>
　　<li value="2" index='2'>业务全景监...

			
		

	





	

		

			

				
					
前端批量对table tr 进行置顶、移动、置底操作。

				
			

			

				

					w2512149的专栏
				

				

					03-16
					
					627
					
				

			

		

		

			
				
在网上搜索了下，大部分都是针对单行进行置顶、上下移动、置底操作的，几乎没有针对复选多行进行批量移动操作。代码我只写了一个大概，很多细节还未完善，比如判断已经移到到最顶部或最底部等，这里贴代码只是给大家一个参考。

			
		

	





	

		

			

				
					
jquery点击缓慢滚动到页面顶部

				
			

			

				

					小耳朵晨晨
				

				

					07-03
					
					1166
					
				

			

		

		

			
				
<style>
  body{margin: 0;}
  .btn{    position: fixed;
    bottom: 5px;
    right: 10px;}
</style>

<body>
    <div> 
        JavaScript 也正在成为手机应用的开发语言。一般来说，安卓平台使用 Java 语言开发，i...

			
		

	





	

		

			

				
					
option order 设置排序列(去掉第一列的排序和小图标)（jquery-datatable隐藏首列排序小图标）

					
热门推荐

				
			

			

				

					【程序员不弃】的博客
				

				

					05-31
					
					1万+
					
				

			

		

		

			
				
option order 设置排序列(去掉第一列的排序和小图标) DataTables中文网  5 May 2016 复制本页地址Tags: 不定时一讲参数详解连接 orderOption order不定时一讲第一列的排序去不掉，这个问题在群里出现的频率很高，这里讲下为什么去不掉禁用排序1
2
3$('#example').DataTable( {
  "ordering": false
} );...

			
		

	





	

		

			

				
					
计算机网络置顶向下第七版 5.2.1 LS算法

				
			

			

				

					weixin_37703001的博客
				

				

					06-04
					
					126
					
				

			

		

		

			
				
LS算法

			
		

	





	

		

			

				
					
jquery 实现表格排序功能

					
最新发布

				
			

			

				

					06-08
				

			

		

		

			
				
要使用 jQuery 实现表格排序功能，可以按照以下步骤进行：

1. 给表头添加点击事件，获取当前点击的列的索引值。
2. 根据索引值，获取该列的值并进行排序。
3. 根据排序结果，重新渲染表格。

下面是一个示例代码：

HTML：

```
<table id="myTable">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>30</td>
      <td>男</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>20</td>
      <td>女</td>
    </tr>
  </tbody>
</table>
```

jQuery：

```
$(function() {
  // 给表头添加点击事件
  $('#myTable thead th').click(function() {
    var index = $(this).index(); // 获取当前点击的列的索引值
    var tbody = $('#myTable tbody'); // 获取表格内容

    // 排序
    tbody.find('tr').sort(function(a, b) {
      var aVal = $(a).find('td').eq(index).text();
      var bVal = $(b).find('td').eq(index).text();
      if ($.isNumeric(aVal) && $.isNumeric(bVal)) {
        return aVal - bVal; // 数字排序
      } else {
        return aVal.localeCompare(bVal); // 字符串排序
      }
    }).appendTo(tbody); // 重新渲染表格
  });
});
```

该代码实现了点击表头进行表格排序的功能。需要注意的是，该代码只支持数字和字符串的排序，对于其他类型的数据需要进行相应的处理。

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		
评论 1

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值