javascript 二維排序表格代碼
更新時間:2010年12月06日 19:55:29 作者:
目前一直在學(xué)習(xí)WEB前端的知識。下面貼出最近完成的一個可排序表格.
功能如下:
1.排序功能:單擊行表頭或列表頭則進行正序排序;若再次單擊,則進行逆序;
2.修改功能:雙擊某個單元格,則可進行輸入操作,當(dāng)輸入框失去焦點時,則新數(shù)據(jù)被保存;
3.隨機功能:每次刷新頁面,表格中的數(shù)據(jù)都不一樣;
效果圖:

完整源碼如下:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
1.排序功能:單擊行表頭或列表頭則進行正序排序;若再次單擊,則進行逆序;
2.修改功能:雙擊某個單元格,則可進行輸入操作,當(dāng)輸入框失去焦點時,則新數(shù)據(jù)被保存;
3.隨機功能:每次刷新頁面,表格中的數(shù)據(jù)都不一樣;
效果圖:

完整源碼如下:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
您可能感興趣的文章:
- JS實現(xiàn)點擊表頭表格自動排序(含數(shù)字、字符串、日期)
- js表頭排序?qū)崿F(xiàn)方法
- javascript 表格排序和表頭浮動效果(擴展SortTable)
- 33種Javascript 表格排序控件收集
- js實現(xiàn)表格字段排序
- js 靜態(tài)HTML表格排序功能實現(xiàn)
- js 表格排序(編輯+拖拽+縮放)
- javascript select列表內(nèi)容按字母倒序排序與按列表倒序排列
- js表數(shù)據(jù)排序 sort table data
- javascript多種數(shù)據(jù)類型表格排序代碼分析
- JS實現(xiàn)的點擊表頭排序功能示例
相關(guān)文章
JavaScript 中文轉(zhuǎn)拼音實現(xiàn)代碼 有些bug
在做項目時候遇到一個小小的顯示客戶部門名稱(拼音)的業(yè)務(wù),就是在部門名稱下有相應(yīng)的拼音,而在現(xiàn)有的數(shù)據(jù)庫中沒有相應(yīng)字段,并且部門數(shù)量比較多,添加起來比較費時,就想能否在js中實現(xiàn),在頁面中處理。2010-03-03微信小程序教程系列之頁面跳轉(zhuǎn)和參數(shù)傳遞(6)
這篇文章主要為大家詳細(xì)介紹了微信小程序教程系列之頁面跳轉(zhuǎn)和參數(shù)傳遞,微信小程序提供了3種頁面跳轉(zhuǎn)方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-04-04ES6中Array.find()和findIndex()函數(shù)的用法詳解
ES6為Array增加了find(),findIndex函數(shù)。find()函數(shù)用來查找目標(biāo)元素,找到就返回該元素,找不到返回undefined,而findIndex()函數(shù)也是查找目標(biāo)元素,找到就返回元素的位置,找不到就返回-1。下面通過實例詳解,需要的朋友參考下吧2017-09-09JavaScript原生數(shù)組函數(shù)實例匯總
這篇文章主要介紹了JavaScript原生數(shù)組函數(shù)實例匯總,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-10-10Javascript 完美運動框架(逐行分析代碼,讓你輕松了運動的原理)
這篇文章主要介紹了Javascript 完美運動框架,逐行分析代碼,讓你輕松了運動的原理,需要的朋友可以參考下2015-01-01JavaScript使用原型和原型鏈實現(xiàn)對象繼承的方法詳解
這篇文章主要介紹了JavaScript使用原型和原型鏈實現(xiàn)對象繼承的方法,簡單講述了javascript原型與原型鏈的原理,并結(jié)合實例形式詳細(xì)分析了javascript中對象繼承的常見實現(xiàn)技巧,需要的朋友可以參考下2017-04-04