快捷導(dǎo)航

js 表格排序(編輯+拖拽+縮放)

更新時間：2010年05月31日 23:34:54 作者：

js 表格排序(編輯+拖拽+縮放)實現(xiàn)代碼，需要的朋友可以參考下。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Table</title> <style type="text/css"> body{ font-size:12px} #tab{ border-collapse: collapse;} .edit{ height:16px; width:98%; background-color:#EFF7FF; font-size:12px; border:0px;} #tab thead td{ background:url(/upload/201005/20100531233452190.bmp);color:#183C94} #tab tbody td{ overflow:hidden} #tab td{border: 1px solid #CECFCE;height:20px;line-height:20px;vertical-align:middle; } #tab td.tc{text-align:center;} .cc{width:10px;height:6px; border:1px solid #999999; background-color:#FFFFFF; position:absolute; display:none;} #tab td.red{border-color:#f30;} .ww{height:100%;width:1px;background:#CECFCE;float:right;margin-right:-1px;cursor:sw-resize} .line{ width:2px; background-color:#999999; position:absolute; display:none} </style> </head> <body> <table id="tab" border="0" cellspacing="1" cellpadding="0"> <thead> <tr> <td width="60"class="tc" ><span>ID</span><div   id="wppm3vysvbp"   class="ww"></div></td> <td width="60"class="tc"><span>選中</span><div   id="wppm3vysvbp"   class="ww"></div></td> <td width="100" class="tc"><span>姓名</span><div   id="wppm3vysvbp"   class="ww"></div></td> <td width="100" class="tc" ><span>生日</span><div   id="wppm3vysvbp"   class="ww"></div></td> <td width="180" class="tc" ><span>備注</span><div   id="wppm3vysvbp"   class="ww"></div></td> </tr> </thead> <tbody> <tr> <td height="16">1</td> <td><input type ="checkbox"></td> <td>張三</td> <td>1982-05-27</td> <td>杯具,全是杯具</td> </tr> <tr> <td>3</td> <td><input type ="checkbox"></td> <td>李四</td> <td>1983-06-27</td> <td>恩恩我魔獸技術(shù)不錯</td> </tr> <tr> <td>2</td> <td><input type ="checkbox"></td> <td>王五</td> <td>1983-05-27</td> <td>波斯王子 時之刃還不錯</td> </tr> <tr> <td>4</td> <td><input type ="checkbox"></td> <td>趙六</td> <td>1983-05-27</td> <td>我叫趙六</td> </tr> <tr> <td>5</td> <td><input type ="checkbox"></td> <td>朱八</td> <td>1986-05-27</td> <td>洗洗睡吧</td> </tr> </tbody> </table>  </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章:

相關(guān)文章

livereload工具實現(xiàn)前端可視化開發(fā)【推薦】
本文將介紹一個工具--livereload。這是一款能根據(jù)你本地文件(html、css、js)的變化，自動跟蹤刷新瀏覽器的實時刷新工具，有了這個工具，會大大減輕你刷新頁面的工作量。下面跟著小編一起來看下吧
2016-12-12
利用Three.js如何實現(xiàn)陰影效果實例代碼
使用three.js可以方便的讓我們在網(wǎng)頁中做出各種不同的3D效果，下面這篇文章主要給大家介紹了關(guān)于利用Three.js如何實現(xiàn)陰影效果的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來一起看看吧。
2017-09-09
禁用backspace網(wǎng)頁回退功能的實現(xiàn)代碼
下面小編就為大家?guī)硪黄胋ackspace網(wǎng)頁回退功能的實現(xiàn)代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-11-11
JavaScript中DOM和BOM的區(qū)別與用處詳解
這篇文章主要介紹了JavaScript中DOM和BOM的區(qū)別與用處,DOM和BOM是前端開發(fā)中常用的兩個概念,它們分別表示不同的對象模型,用于操作瀏覽器的不同部分,了解它們的區(qū)別和用處,有助于在前端開發(fā)中靈活使用?JavaScript?操作頁面和瀏覽器,需要的朋友可以參考下
2024-09-09
JavaScript中最常用的10種代碼簡寫技巧總結(jié)
這篇文章主要總結(jié)了JavaScript中最常用的10種代碼簡寫技巧的相關(guān)資料，其中包括三元操作符、短路求值簡寫方式、聲明變量簡寫方法、if存在條件簡寫方法及JavaScript循環(huán)簡寫方法等等，分別給出了詳細(xì)的示例代碼供大家參考，需要的朋友們下面來一起看看吧。
2017-06-06
ECharts儀表盤實例代碼(附源碼下載)
大家在汽車駕駛艙里一眼就可以看到儀表盤，使用使用Echarts制作的儀表盤可以輕松展示用戶的數(shù)據(jù)，清晰的看出某個指標(biāo)值所在的范圍，儀表盤形式的報表應(yīng)用在各種統(tǒng)計系統(tǒng)中，本文結(jié)合實例講解儀表盤在銷售任務(wù)完成率的統(tǒng)計應(yīng)用
2016-02-02
HTTP?302?redirect應(yīng)用及介紹
這篇文章主要為大家介紹了HTTP?302?redirect應(yīng)用及作用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
2023-12-12
使用 JavaScript 進行函數(shù)式編程 (一) 翻譯
本文是函數(shù)式編程系列的第一篇文章。這里我會簡要介紹一下編程范式，然后會直接介紹使用 Javascript 進行函數(shù)式編程的概念，因為 JavsScript 是最被認(rèn)可的函數(shù)式程序語言之一。我們鼓勵讀者通過參考資料部分進一步了解這一迷人的概念
2015-10-10
純js實現(xiàn)遮罩層效果原理分析
這篇文章主要介紹了純js實現(xiàn)遮罩層效果，下面就它的原理做下分析，感興趣的朋友可以參考下
2014-05-05
Openlayers學(xué)習(xí)之地圖比例尺控件
這篇文章主要為大家詳細(xì)介紹了Openlayers學(xué)習(xí)之地圖比例尺控件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-09-09