jQuery 表格排序

最新推荐文章于 2019-07-30 11:56:27 发布

zhouxianglh

最新推荐文章于 2019-07-30 11:56:27 发布

阅读量125

点赞数

分类专栏： JavaScript 文章标签： jQuery JavaScript XHTML CSS Google ViewUI

本文链接：https://blog.csdn.net/zhouxianglh/article/details/83637765

版权

JavaScript 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javaScrip基于对象</title>
<style type="text/css">
<!--
.theadCss {
	color: #FFF;
	background-color: #000;
}
-->
</style>
<script language="javascript" src="js/jquery-1.4.1.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(
	function(){
		//添加根据不同的列排序
		$("thead > tr >td").eq(0).click(function(){sortTable(0);});
		$("thead > tr >td").eq(1).click(function(){sortTable(1);});
		$("thead > tr >td").eq(2).click(function(){sortTable(2);});
});
function sortTable(indexs){
	//通过.get()  获取DOM元素(把jQuery 元素转换为DOM 元素) 
	var rows = $("tbody>tr").get();
	//sort 排序
	rows = rows.sort(function(a,b){
		//排序不区分大小写
		var keyA = $(a).find("td").eq(indexs).text().toUpperCase();
		var keyB = $(b).find("td").eq(indexs).text().toUpperCase();
		if(keyA < keyB){return -1;}
		if(keyA > keyB){return 1;}
		return 0;
	});
	//全部重新从尾部插入，这里因为已存在就移动到尾部
	$.each(rows,function(index,row){$("table>tbody").append(row);});
}
</script>
</head>
<body>
<table >
	<!-- 这里用thead,tbody 是为了方便 使用选择器 -->
  <thead class="theadCss">
    <tr>
      <td>标号</td>
      <td>名称</td>
      <td>备注</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>4</td>
      <td>doc</td>
      <td>word</td>
    </tr>
    <tr>
      <td>2</td>
      <td>window</td>
      <td>MicroSoft</td>
    </tr>
    <tr>
      <td>3</td>
      <td>kingsoft</td>
      <td>wps</td>
    </tr>
    <tr>
      <td>1</td>
      <td>google</td>
      <td>great</td>
    </tr>
    <tr>
      <td>5</td>
      <td>baidu</td>
      <td>sb</td>
    </tr>
  </tbody>
</table>
</body>
</html>

zhouxianglh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery 表格排序

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&lt;
复制链接

扫一扫

专栏目录