jQuery table 按指定列排序

最新推荐文章于 2021-06-10 12:10:41 发布

desmond_assis

最新推荐文章于 2021-06-10 12:10:41 发布

阅读量1.8k

点赞数

分类专栏： jQuery 文章标签： jQuery插件

本文链接：https://blog.csdn.net/firemaple_li/article/details/8831715

版权

jQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.描述：实现对table中的某一列进行排序，排名用1,2,3...标记，重复项用(T)代替，效果如下图

2.Html代码

<html>
<head>
	<script language="javascript" src="../js/jquery-1.9.1.js"></script>
	<style type="text/css">
		.sorted {background-color:rgb(123,213,120);}
	</style>
	
	<p class="header">
		We're JavaScript Group, Welcome to join us!
	</p>
	
	<title>Moving Content</title>
</head>

<body>
	<table>
		<tr>
			<th>rank</th>
			<th>math</th>
			<th class="sorted">english</th>
		</tr>
	
		<tr>
			<td class="rgo"></td>
			<td>12</td>
			<td class="sorted">1</td>
		</tr>
		<tr>
			<td class="rgo"></td>
			<td>62</td>
			<td class="sorted">12</td>
		</tr>
		<tr>
			<td class="rgo"></td>
			<td>32</td>
			<td class="sorted">33</td>
		</tr>
		<tr>
			<td class="rgo"></td>
			<td>1</td>
			<td class="sorted">33</td>
		</tr>
		<tr>
			<td class="rgo"></td>
			<td>132</td>
			<td class="sorted">78</td>
		</tr>
	</table>
	
</body>

<script type="text/javascript">
		
$(function () {
	var options = {
		showText : "(T)"
	};
	ranking(options);

	});
		
	var ranking = function(options) {
			var sortedArray = new Array();
			var defaultOptions = {
				rankClass : "rgo",
				sortedClass : "sorted",
				showText : ""
			};
			var opts = $.extend({}, defaultOptions, options);
			alert(opts.rankClass+","+opts.sortedClass);
			//var c=tds.click(get_columns);
			$("."+opts.sortedClass).each(function() {
				var sortedValue = $(this).text();
				sortedArray.push(sortedValue);
			});
			sortedArray.shift(); // delete the first element.
			var arrlist = new Array();
			var flag = 0;
			for(var i in sortedArray) {
				var result = "";
				if(i > 0) {
					if(sortedArray[i] == sortedArray[i-1]) {
						if(flag == 0) {
							arrlist[i-1] = (i) + opts.showText;
							flag = 1;
						}
					}else {
						flag = 0;
						result = (parseInt(i) + 1);
					}
				}else {
					result = (parseInt(i) + 1);
				}
				arrlist.push(result);
			}
			
			$("."+opts.rankClass).each(function(index) {
				//alert(index);
				$(this).text(arrlist[index]);
			});
		
		};
</script>

</html>

desmond_assis

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery table 按指定列排序

1.描述：实现对table中的某一列进行排序，排名用1,2,3...标记，重复项用(T)代替，效果如下图2.Html代码 .sorted {background-color:rgb(123,213,120);} We're JavaScript Group, Welcome to join us! Moving Content
复制链接

扫一扫