javascript 二維排序表格代碼
更新時(shí)間：2010年12月06日 19:55:29 作者：
目前一直在學(xué)習(xí)WEB前端的知識(shí)。下面貼出最近完成的一個(gè)可排序表格.
功能如下：
1.排序功能：?jiǎn)螕粜斜眍^或列表頭則進(jìn)行正序排序；若再次單擊，則進(jìn)行逆序；
2.修改功能：雙擊某個(gè)單元格，則可進(jìn)行輸入操作，當(dāng)輸入框失去焦點(diǎn)時(shí)，則新數(shù)據(jù)被保存；
3.隨機(jī)功能：每次刷新頁(yè)面，表格中的數(shù)據(jù)都不一樣；
效果圖：
完整源碼如下：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
1.排序功能：?jiǎn)螕粜斜眍^或列表頭則進(jìn)行正序排序；若再次單擊，則進(jìn)行逆序；
2.修改功能：雙擊某個(gè)單元格，則可進(jìn)行輸入操作，當(dāng)輸入框失去焦點(diǎn)時(shí)，則新數(shù)據(jù)被保存；
3.隨機(jī)功能：每次刷新頁(yè)面，表格中的數(shù)據(jù)都不一樣；
效果圖：
完整源碼如下：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
您可能感興趣的文章:
- JS實(shí)現(xiàn)點(diǎn)擊表頭表格自動(dòng)排序（含數(shù)字、字符串、日期）
- js表頭排序?qū)崿F(xiàn)方法
- javascript 表格排序和表頭浮動(dòng)效果(擴(kuò)展SortTable)
- 33種Javascript 表格排序控件收集
- js實(shí)現(xiàn)表格字段排序
- js 靜態(tài)HTML表格排序功能實(shí)現(xiàn)
- js 表格排序(編輯+拖拽+縮放)
- javascript select列表內(nèi)容按字母倒序排序與按列表倒序排列
- js表數(shù)據(jù)排序 sort table data
- javascript多種數(shù)據(jù)類型表格排序代碼分析
- JS實(shí)現(xiàn)的點(diǎn)擊表頭排序功能示例
相關(guān)文章
JavaScript 中文轉(zhuǎn)拼音實(shí)現(xiàn)代碼 有些bug
在做項(xiàng)目時(shí)候遇到一個(gè)小小的顯示客戶部門名稱（拼音）的業(yè)務(wù)，就是在部門名稱下有相應(yīng)的拼音，而在現(xiàn)有的數(shù)據(jù)庫(kù)中沒(méi)有相應(yīng)字段，并且部門數(shù)量比較多，添加起來(lái)比較費(fèi)時(shí)，就想能否在js中實(shí)現(xiàn)，在頁(yè)面中處理。2010-03-03
微信小程序教程系列之頁(yè)面跳轉(zhuǎn)和參數(shù)傳遞（6）
這篇文章主要為大家詳細(xì)介紹了微信小程序教程系列之頁(yè)面跳轉(zhuǎn)和參數(shù)傳遞，微信小程序提供了3種頁(yè)面跳轉(zhuǎn)方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
ES6中Array.find()和findIndex()函數(shù)的用法詳解
ES6為Array增加了find()，findIndex函數(shù)。find()函數(shù)用來(lái)查找目標(biāo)元素，找到就返回該元素，找不到返回undefined，而findIndex()函數(shù)也是查找目標(biāo)元素，找到就返回元素的位置，找不到就返回-1。下面通過(guò)實(shí)例詳解，需要的朋友參考下吧2017-09-09
JavaScript原生數(shù)組函數(shù)實(shí)例匯總
這篇文章主要介紹了JavaScript原生數(shù)組函數(shù)實(shí)例匯總,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-10-10
Javascript 完美運(yùn)動(dòng)框架(逐行分析代碼，讓你輕松了運(yùn)動(dòng)的原理)
這篇文章主要介紹了Javascript 完美運(yùn)動(dòng)框架,逐行分析代碼，讓你輕松了運(yùn)動(dòng)的原理,需要的朋友可以參考下2015-01-01
淺談JavaScript 中有關(guān)時(shí)間對(duì)象的方法
下面小編就為大家?guī)?lái)一篇淺談JavaScript 中有關(guān)時(shí)間對(duì)象的方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08
javascript實(shí)現(xiàn)倒計(jì)時(shí)小案例
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)倒計(jì)時(shí)小案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
JavaScript使用原型和原型鏈實(shí)現(xiàn)對(duì)象繼承的方法詳解
這篇文章主要介紹了JavaScript使用原型和原型鏈實(shí)現(xiàn)對(duì)象繼承的方法,簡(jiǎn)單講述了javascript原型與原型鏈的原理,并結(jié)合實(shí)例形式詳細(xì)分析了javascript中對(duì)象繼承的常見(jiàn)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-04-04
這篇文章主要為大家詳細(xì)介紹了p5.js繪制旋轉(zhuǎn)的正方形，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
這篇文章主要通過(guò)動(dòng)畫的示例來(lái)為大家詳細(xì)介紹一下JavaScript的函數(shù)封裝，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以學(xué)習(xí)一下2022-03-03