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;
}
效果圖-----排序之前：
升序：
降序：
完整代碼：
sort.htmltable 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 | 湖南常德 |
| jack | 45 | 湖南臨澧 |
| 王華 | 23 | 浙江杭州 |
| 張進 | 30 | 安微合肥 |
| 周全 | 23 | 湖南益陽 |
| 楊哥 | 42 | 湖南常德 |
以上就是本文的全部內容，很詳細，教大家如何對表格中的元素進行排序操作，感謝大家閱讀這篇javascript實現對表格元素進行排序操作的文章，希望大家喜歡。
總結
以上是生活随笔為你收集整理的php表格单元格怎么实现排序,javascript实现对表格元素进行排序操作的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 台桃园机场44年来将首次收取转机费，预计
- 下一篇： 男子索道运行时攀爬缆车 为了减少缆车费用