原生JS表格排序，实现淘宝商品列按价格要求等排序！

如何使用原生JS实现点击表格标题栏实现按要求自动排序功能？今天就教大家实现这个功能，这个功能可应用再淘宝等电商网站，按要求，如价格重新对商品排序

这里我就以同学曾经去百度面试遇到的一道面试题为例子，要求是点击不同的科目，按点击科目的成绩重新排序。

源码地址：http://download.csdn.net/detail/wcslb/9688040

HTML页面代码：

<body><table id="table"><thead><tr><th>排名</th><th>姓名</th><th οnclick="paixu(2)">语文</th><th οnclick="paixu(3)">数学</th><th οnclick="paixu(4)">外语</th><th>总和</th></tr></thead><tbody><tr><td></td><td>李二狗</td><td>76</td><td>80</td><td>87</td><td></td></tr><tr><td></td><td>陈莲莲</td><td>98</td><td>43</td><td>78</td><td></td></tr><tr><td></td><td>Alien</td><td>90</td><td>53</td><td>86</td><td></td></tr><tr><td></td><td>陈晓瑞</td><td>80</td><td>43</td><td>87</td><td></td></tr><tr><td></td><td>高健</td><td>43</td><td>87</td><td>98</td><td></td></tr><tr><td></td><td>张媛媛</td><td>60</td><td>54</td><td>84</td><td></td></tr><tr><td></td><td>郑媛媛</td><td>34</td><td>34</td><td>67</td><td></td></tr><tr><td></td><td>秦优</td><td>54</td><td>87</td><td>87</td><td></td></tr><tr><td></td><td>陈书贞</td><td>65</td><td>87</td><td>67</td><td></td></tr><tr><td></td><td>陈杲</td><td>100</td><td>100</td><td>100</td><td></td></tr></tbody></table>
</body>

CSS代码：

<style>*{margin:0;padding:0;}table{border-collapse:collapse;margin:0 auto;}tbody tr{cursor:pointer;}th,td{width:200px;height:30px;border:1px solid #000;}td{text-align:center;}</style>

JS代码方法一：

  <script type="text/javascript">// 1.获取所有的trvar oTr = document.querySelectorAll("tbody tr");function paixu (idx) {for (var i = 0; i < oTr.length; i++) {for (var j = 0; j < oTr.length-1-i; j++) {  //每次一次都会比出最大的值，放到最后，然后第二次数组长度减去1，再循环比一次if( Number(oTr[j].querySelectorAll("td")[idx].innerHTML)< Number(oTr[j+1].querySelectorAll("td")[idx].innerHTML)){var t = oTr[j+1].innerHTML;oTr[j+1].innerHTML = oTr[j].innerHTML;oTr[j].innerHTML = t;}}     }}</script>

JS代码方法二：

 <script type="text/javascript">var tbody=document.querySelector("tbody")var tr=document.querySelectorAll("tbody tr");function paixu(idx){//新建两个素组 //tempArr:用来保存td里的数字进行大小排序;//TrArr:用来保存克隆出来的Tr;var tempArr=[];var TrArr=[];for(i=0;i<tr.length;i++){tempArr.push( Number(tr[i].querySelectorAll("td")[idx].innerHTML) );TrArr.push(tr[i].cloneNode(true));};tempArr.sort(function(a,b){return a-b;})for(var j=0;j<tempArr.length;j++){for(var p=0;p<TrArr.length;p++){if( Number(tempArr[j]) == Number(TrArr[p].querySelectorAll("td")[idx].innerHTML) ){tbody.appendChild(TrArr[p]);}}};var trlength=tr.length;for(var k=0;k<trlength;k++){tbody.removeChild(document.querySelectorAll("tbody tr")[0]);}}</script>

（我吃酸萝卜新浪微博http://www.weibo.com/wcslb ---李帅醒著）

原生JS表格排序，实现淘宝商品列按价格要求等排序！相关推荐

Python爬虫淘宝商品详情页价格、类似数据
在讲爬取淘宝详情页数据之前,先来介绍一款 Chrome 插件:Toggle JavaScript (它可以选择让网页是否显示 js 动态加载的内容),如下图所示: 当这个插件处于关闭状态时,待爬取 ...
原生JS实现简单的淘宝放大镜效果
大家经常去淘宝买东西会发现,淘宝上的放大镜效果挺有意思的,这里简单的实现了下,代码中的图片地址亲们可以自行更换; <!DOCTYPE html> <html> <hea ...
采集淘宝API数据，抓取淘宝商品资料无需申请appkey
为了进行淘宝的API开发,首先我们需要做下面几件事情. 1)开发者注册一个账号 2)然后为每个淘宝应用注册一个应用程序键(App Key) . 3)下载淘宝API的SDK并掌握基本的API基础知识和调 ...
微信小程序仿京东淘宝商品排序
微信小程序仿京东淘宝商品排序效果图如下所示仿京东微信小程序视频请加QQ:1010753897 下载地址:https://download.csdn.net/download/qq_43764578 ...
python 提取网页正文_一篇文章教会你用Python爬取淘宝海量信息，把淘宝商品整理成一个表格...
最近看了爬虫又新做了个小作品,来瞅瞅吧~~~ 正文开始因为最近想买ipad,所以想要尝试一下吧淘宝上所有ipad商品做一个统计,把所有ipad商品的信息集合到一个excel里,那么使用爬虫这个程 ...
用JS实现PC端淘宝查看商品图片放大镜效果
实现放大镜功能一.前言二.图示淘宝商品放大镜效果三.需要掌握的知识点四.放大镜实现原理五.放大镜代码及注释六.放大镜最终成果七.放大镜源码八.总结一.前言今天翻阅文件夹看到了之前写 ...
淘宝客教程：如何利用JS调用淘宝商品javascript教程
[导读]大家都知道,现在最流行的是淘宝客,但一年前搜索引擎已经对淘宝客网站的API很不友好了,因为做的人太多,露得清深层净化API都是直接获取的淘宝数据,内容都是大量重复的.后来淘宝客javascri ...
爬取京东淘宝商品销量并可视化处理数据
目的:获取京东和淘宝的同一种手机型号的销量信息,获取三组,对比销量,并将数据可视化处理. 一.京东销量获取如下面的例子: 京东销量: data-sku:对应下一个页面的productId defau ...
python爬取并分析淘宝商品信息
python爬取并分析淘宝商品信息背景介绍一.模拟登陆二.爬取商品信息 1. 定义相关参数 2. 分析并定义正则 3. 数据爬取三.简单数据分析 1.导入库 2.中文显示 3.读取数据 4.分 ...

原生JS表格排序，实现淘宝商品列按价格要求等排序！

原生JS表格排序，实现淘宝商品列按价格要求等排序！相关推荐

最新文章

热门文章