php表格单元格怎么实现排序,javascript实现对表格元素进行排序操作

我们在上网中都能看到很多能够排序的,如大小、时间、价格等

现在我们也试一下排序功能:

排序的函数代码:里面含有点击之后排序--还原,和排升序和降序。

function sortAge(){

//对年龄进行排序,要先进行获得每一行对象,然后对象对象中的第一个(从0 开始)的大小进行排序

var tabNode = document.getElementById("tabid");

var rows0 = tabNode.rows;

var rows1 = [];

//现将元素拷贝一份出来, 第一行不用排序

for (var x = 1; x < rows0.length; x++) {

rows1[x - 1] = rows0[x];

}

for (var x = 0; x < rows1.length - 1; x++) {//每个元素是行对象

for (var y = x + 1; y < rows1.length; y++) {

//对每一行的内容进行解析成数字

if (parseInt(rows1[x].cells[1].innerHTML) > parseInt(rows1[y].cells[1].innerHTML)) {

//alert("aa="+x+":"+rows1[x].cells[1].innerHTML);

//alert("bb"+rows1[y].cells[1].innerHTML);

var temp = rows1[x];

rows1[x] = rows1[y];

rows1[y] = temp;

}

}

}

/* 点击之后排序,排序之后恢复之前的状态

if (flag){

for (var x = 0; x < rows1.length; x++) {

// tabNode.childNodes[0].appendChild(rows[x]);//方法一: 不一定兼容

rows1[x].parentNode.appendChild(rows1[x]);

}

}else{

for (var x = 1; x < rows0.length; x++) {

// tabNode.childNodes[0].appendChild(rows[x]);//方法一: 不一定兼容

rows0[x].parentNode.appendChild(rows0[x]);

}

}

flag=!flag;*/

/* 下面的是点之后出现正序和逆序显示 正序和逆序的区别就是appendchild的前后关系而已*/

var ageimg=document.getElementById("ageid");

if (flag) {

for (var x = 0; x < rows1.length; x++) {//排好序之后就从0开始

// tabNode.childNodes[0].appendChild(rows[x]);//方法一: 不一定兼容

rows1[x].parentNode.appendChild(rows1[x]);

}

ageimg.innerHTML="年龄▲";//设置上面的图标

}else{

for (var x = rows1.length-1; x >=0; x--) {

// tabNode.childNodes[0].appendChild(rows[x]);//方法一: 不一定兼容

rows1[x].parentNode.appendChild(rows1[x]);

}

ageimg.innerHTML="年龄▼"

}

flag=!flag;

loading();//排序之后还要对颜色重新设置

}

设置表格的背景颜色代码,导入的css:

function loading(){

var name;

var tabNode=document.getElementById("tabid");

var rows=tabNode.rows;//获得每一行的数组对象

var rowslength=rows.length;//每一行的长度

for(var x=1;x

if(x%2==0){

rows[x].className="one";

}else{

rows[x].className="two";

}

//当移动上去之后,之前的颜色要记录下来,不然移下来之后全部都是一个颜色了

rows[x].οnmοuseοver=function(){

name=this.className;

this.className="three";

}

rows[x].οnmοuseοut=function(){

this.className=name;

}

}

}

οnlοad=function(){

loading();

}

css代码:

table td a:hover{

background-color:#0080c0;

}

.one{

background-color:#80ff00;

}

.two{

background-color:#ff8040;

}

.three{

background-color:#008040;

}

table{

width:500px;

height:500px;

border:#400040 solid 2px;

border-collapse:collapse;

}

table td,th{

border:solid 2px;

}

table th{

background-color:#c0c0c0;

}

效果图-----排序之前:

0f296d3425e8f66b10bcb5cd0838bbba.png

升序:

e4325fe81ca70c73eab60383c004d10e.png

降序:

b2b8e2cbbb7f58e4865803b77ef754b9.png

完整代码:

sort.html

table td a:hover{

background-color:#0080c0;

}

.one{

background-color:#80ff00;

}

.two{

background-color:#ff8040;

}

.three{

background-color:#008040;

}

table{

width:500px;

height:500px;

border:#400040 solid 2px;

border-collapse:collapse;

}

table td,th{

border:solid 2px;

}

table th{

background-color:#c0c0c0;

}

function loading(){

var name;

var tabNode=document.getElementById("tabid");

var rows=tabNode.rows;//获得每一行的数组对象

var rowslength=rows.length;//每一行的长度

for(var x=1;x

if(x%2==0){

rows[x].className="one";

}else{

rows[x].className="two";

}

//当移动上去之后,之前的颜色要记录下来,不然移下来之后全部都是一个颜色了

rows[x].οnmοuseοver=function(){

name=this.className;

this.className="three";

}

rows[x].οnmοuseοut=function(){

this.className=name;

}

}

}

οnlοad=function(){

loading();

}

var flag=true;

function sortAge(){

//对年龄进行排序,要先进行获得每一行对象,然后对象对象中的第一个(从0 开始)的大小进行排序

var tabNode = document.getElementById("tabid");

var rows0 = tabNode.rows;

var rows1 = [];

//现将元素拷贝一份出来, 第一行不用排序

for (var x = 1; x < rows0.length; x++) {

rows1[x - 1] = rows0[x];

}

for (var x = 0; x < rows1.length - 1; x++) {//每个元素是行对象

for (var y = x + 1; y < rows1.length; y++) {

//对每一行的内容进行解析成数字

if (parseInt(rows1[x].cells[1].innerHTML) > parseInt(rows1[y].cells[1].innerHTML)) {

//alert("aa="+x+":"+rows1[x].cells[1].innerHTML);

//alert("bb"+rows1[y].cells[1].innerHTML);

var temp = rows1[x];

rows1[x] = rows1[y];

rows1[y] = temp;

}

}

}

/* 点击之后排序,排序之后恢复之前的状态

if (flag){

for (var x = 0; x < rows1.length; x++) {

// tabNode.childNodes[0].appendChild(rows[x]);//方法一: 不一定兼容

rows1[x].parentNode.appendChild(rows1[x]);

}

}else{

for (var x = 1; x < rows0.length; x++) {

// tabNode.childNodes[0].appendChild(rows[x]);//方法一: 不一定兼容

rows0[x].parentNode.appendChild(rows0[x]);

}

}

flag=!flag;*/

/* 下面的是点之后出现正序和逆序显示 正序和逆序的区别就是appendchild的前后关系而已*/

var ageimg=document.getElementById("ageid");

if (flag) {

for (var x = 0; x < rows1.length; x++) {//排好序之后就从0开始

// tabNode.childNodes[0].appendChild(rows[x]);//方法一: 不一定兼容

rows1[x].parentNode.appendChild(rows1[x]);

}

ageimg.innerHTML="年龄▲";//设置上面的图标

}else{

for (var x = rows1.length-1; x >=0; x--) {

// tabNode.childNodes[0].appendChild(rows[x]);//方法一: 不一定兼容

rows1[x].parentNode.appendChild(rows1[x]);

}

ageimg.innerHTML="年龄▼"

}

flag=!flag;

loading();//排序之后还要对颜色重新设置

}

姓名年龄出生地
张三13湖南长沙
李四15湖南常德
jack45湖南临澧
王华23浙江杭州
张进30安微合肥
周全23湖南益阳
杨哥42湖南常德

以上就是本文的全部内容,很详细,教大家如何对表格中的元素进行排序操作,感谢大家阅读这篇javascript实现对表格元素进行排序操作的文章,希望大家喜欢。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/302729.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【10.29周一电商,已好】中国日历的至高境界,377张震撼级插画,美到爆!

每段时光都有属于每段时光的回忆它们是童年的纸飞机是校园时代的试卷与课本是第一次离开家乡时的兴奋与忐忑是跟某个人眼神交汇时的慌乱...回忆如此珍贵&#xff0c;以致于令我们频频回想&#xff0c;渴望着回到过去&#xff0c;与美好再度相逢。还记得文先生给大家推荐过的新一…

设置润乾报表鼠标移到格子上就显示提示内容

为了达到一定的交互性和易用性,我们一般喜欢将鼠标移动到格子上就能显示出一定的提示信息,比方说这个格子大小固定了但是里面内容超出格子了,这样我们希望鼠标移动过去后能自动提示所有的内容。用润乾报表可以这样设计&#xff1a; 比方说一个格子里面有如下内容 “这是一个很长…

ASP.NET Core 单元测试:如何Mock Url.Page()

点击上方蓝字关注“汪宇杰博客”导语在 ASP.NET Core 中&#xff0c;当你在 UrlHelperExtensions 类上使用扩展方法时&#xff0c;很难在单元测试中编写Mock。因为Moq框架不支持模拟扩展方法。问题例如&#xff0c;我的博客代码中使用了 Url.Page() 方法&#xff1a;var callba…

matlab dwt函数应用,MATLAB中关于DCT,DFT和DWT的相关函数

1. 离散傅立叶变换的 Matlab 实现Matlab 函数 fft、fft2 和 fftn 分别可以实现一维、二维和 N 维 DFT 算法&#xff1b;而函数 ifft、ifft2 和ifftn 则用来计算反 DFT 。这些函数的调用格式如下&#xff1a;A&#xff1d;fft(X,N,DIM)其中&#xff0c;X 表示输入图像&#xff1…

“甜橙金融杯”数据建模大赛发布,8万重金寻找大数据金融人才!

全世界有3.14 % 的人已经关注了数据与算法之美随着互联网概念不断发展&#xff0c;越来越多的商家进入这一市场。为了在竞争中拉取新用户&#xff0c;培养用户的消费习惯&#xff0c;各种类型的营销和补贴活动层出不穷。为正常用户带来福利的同时&#xff0c;也催生了一批“羊毛…

常用加解密工具集合|视频图片加解密方案

最近工作需要做视频加密解密&#xff0c;大概需求就是摄像头录制好的视频实时加密存储到本地&#xff0c;防止别人拔掉存储卡把视频拷贝走。大胆设想一下&#xff0c;假如现在很多网约车车内都有摄像头&#xff0c;这些对着乘客和司机的车内摄像头都是实时录制视频并存储到本地…

修炼九阴真经Windows Phone开发 (7):本地化应用程序栏Localizing an Application Bar 下...

本节介绍另一个本地化的方法&#xff1a; 在项目中添加资源文件&#xff1a;&#xff08;这个文件将包含应用程序的默认语言的资源&#xff09; 将要名称和值添加进去。&#xff08;作为应用程序中向用户显示字符串值&#xff09;. 重复上面的方法&#xff0c;向项目中添加更多…

matlab编程数字信号,MATLAB--数字信号实验.doc

MATLAB--数字信号实验前言MATLAB 是一套功能强大的工程计算及数据处理软件&#xff0c;广泛应用于工业&#xff0c;电子&#xff0c;医疗和建筑等众多领域。它是一种面向对象的&#xff0c;交互式程序设计语言&#xff0c;其结构完整又优良的可移植性。它在矩阵运算&#xff0c…

统治世界的十大算法

全世界有3.14 % 的人已经关注了数据与算法之美软件正在统治世界。而软件的核心则是算法。算法千千万万&#xff0c;又有哪些算法属于“皇冠上的珍珠”呢&#xff1f;Marcos Otero 给出了他的看法。什么是算法&#xff1f;通俗而言&#xff0c;算法是一个定义明确的计算过程&…

Hosting in .NET Core

在.NET Core中&#xff0c;Host负责应用程序的启动和生命周期管理。除此之外&#xff0c;在Host中还可以设置日志(Logging)、配置(Configuration)和依赖关系注入(Dependency Injection)等。Host将一个常规的控制台应用程序(Console Application)变成了一个可以长时间运行的服务…

hilbert曲线序编码matlab,Hilbert曲线扫描矩阵的生成算法及其MATLAB程序代码

Hilbert曲线扫描矩阵的生成算法及其MATLAB程序代码王笋,徐小双(华中科技大学控制科学与工程系&#xff0c;武汉 430074)摘 要Hilbert曲线是一种重要的图像处理工具,在图像处理,特别是图像扫描中广泛应用.为了正确快速的生成Hilbert曲线扫描矩阵,提出了基于矩阵运算的生成Hilber…

java例程练习(一维数组)

public class Test {public static void main(String[] args) {int a[] { 3, 9, 8}; //静态初始化Date days1 [] {new Date(1, 4, 2004),new Date(2, 4, 2004),new Date(3, 4, 2004)};//动态初始化Date [] days2 new Date[3];for (int i 0; i < 3; i) {days2[i] new Da…

如何用大数据找女朋友?

全世界有3.14 % 的人已经关注了数据与算法之美导读找女朋友不仅需要好眼力&#xff0c;还需要一些技术含量。比如眼下正热的大数据&#xff0c;可以认真钻研&#xff0c;用数据分析来实现自己的“脱单计划”。小猿25岁&#xff0c;单身男&#xff0c;热衷大数据&#xff0c;并决…

ASP.NET Core 单元测试:如何 Mock HttpContext.Features.Get()

点击上方蓝字关注“汪宇杰博客”导语在 ASP.NET Core 里&#xff0c;如果你想单元测试 HttpContext.Features.Get<SomeType>()&#xff0c;这个技巧一定不要错过。问题我有个 Error 页面&#xff0c;需要取得异常的详细信息。我使用 HttpContext.Features.Get<IExcept…

php 模拟登录163邮箱,PHP模拟登陆163邮箱发邮件及获取通讯录列表的方

本文实例讲述了PHP模拟登陆163邮箱发邮件及获取通讯录列表的方法。分享给大家供大家参考。具体实现方法如下&#xff1a;代码如下:header("Content-Type: text/html; charsetUTF-8");error_reporting(0);/*** 登陆* $user 163用户名* $pass 密码**/function login($u…

网址收藏

http://www.xdowns.com/ 绿色软件下载转载于:https://blog.51cto.com/guailele/851308

mini api

大部分主流语言都支持web框架&#xff0c;并且实现起来相对轻便&#xff0c;简捷&#xff0c;比如&#xff1a;go的gin包package main import "github.com/gin-gonic/gin" func main() {r : gin.Default()r.GET("/ping", func(c *gin.Context) {c.JSON(200…

qt交叉编译环境搭建方法

&#xff08;一&#xff09;准备工作1、下载最新版本的Qt 4.7.2&#xff1a; http://get.qt.nokia.com/qt/source/qt-everywhere-opensource-src-4.7.2.tar.gz2、安装交叉编译器4.3.3或其它版本3、编译tslib-1.4.1.tar.bz2&#xff0c;这个东西是触摸屏库&#xff0c;编译QT4.7…

edge robert matlab,哪位熟悉matlab的大神路过瞄一眼哈

cxfx(believe truth believe me)UID240430帖子100精华积分1755蛋蛋币1755 枚威望0BT积分0阅读权限60性别男在线时间125 小时注册时间2013-3-27鸵鸟蛋主楼大中小发表于 2013-5-13 21:30 只看该作者哪位熟悉matlab的大神路过瞄一眼哈求大神指点迷津那&#xff01;谁来帮着看一下这…

朋友来网易面试,挂了~

阅读本文大概需要8分钟。最近推荐一个朋友来网易面试&#xff0c;这哥们在小厂工作6年&#xff0c;研发经验非常丰富&#xff0c;但他却挂在了技术终面。事后和他约了个饭&#xff0c;深聊了一次发现他的技术成长路径还是有点问题。软件开发行业需要经验&#xff0c;需要时间来…