日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 > 编程资源 > 编程问答 >内容正文

编程问答

锁定表头和固定列(Fixed table head and columns)

發布時間：2023/12/10 编程问答 37 豆豆
生活随笔 收集整理的這篇文章主要介紹了 锁定表头和固定列(Fixed table head and columns) 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

前段時間需要這個功能，但是找了很多都不能完美的實現，不是只能鎖定表頭，就是瀏覽器兼容問題什么的，在此就自己做了一個鎖定表頭和列的js方法，依賴于JQuery。

因為方法很簡單，就未封裝成插件的形式，僅僅以代碼方式發布。這里把自己做的方式寫出來，以資紀念。

支持IE6+，FF3.6+，Opera9+，Chrome9+

一、實現方式

這里的準備使用4個table實現，具體如下圖：

上圖紅色部分為要取出來的部分，藍色部分為拼接后可以看到的部分。最終結果如下圖

實現后效果：

姓名班級成績主科文科理科總分語文數學英語政治歷史地理物理化學生物
學生1班級364?104?150?93?32?82?26?44?83?678?
學生2班級2120?66?150?85?5?50?72?32?90?670?
學生3班級2133?61?49?97?67?13?64?8?60?552?
學生4班級37?136?105?86?56?11?98?29?18?546?
學生5班級2129?146?62?64?67?1?70?57?16?612?
學生6班級245?29?51?91?9?2?37?3?26?293?
學生7班級128?25?127?96?43?90?75?13?28?525?
學生8班級378?64?20?29?70?92?100?69?30?552?
學生9班級265?10?139?19?57?86?57?79?76?588?
學生10班級2113?142?4?100?41?69?12?45?20?546?
學生11班級341?84?42?23?89?88?6?4?21?398?
學生12班級14?102?111?61?76?12?25?66?39?496?
學生13班級249?144?56?75?18?58?39?13?88?540?
學生14班級1119?81?73?53?37?88?79?69?30?629?
學生15班級3120?78?86?58?50?7?20?42?24?485?
學生16班級165?71?9?64?45?31?18?53?5?361?
學生17班級172?139?24?20?39?49?19?21?23?406?
學生18班級350?84?53?70?77?81?38?80?25?558?
學生19班級156?147?134?59?57?31?48?86?7?625?
學生20班級1103?38?96?100?21?88?36?37?18?537?
學生21班級1133?150?28?37?96?88?12?36?87?667?
學生22班級2140?59?42?95?94?50?3?58?63?604?
學生23班級12?51?19?17?19?7?93?35?49?292?
學生24班級367?2?91?23?22?37?79?52?63?436?
學生25班級329?17?149?44?13?29?98?70?6?455?
學生26班級3126?117?112?11?100?55?87?1?18?627?
學生27班級3144?115?131?97?19?92?79?4?72?753?
學生28班級2107?77?143?94?89?90?35?70?3?708?
學生29班級314?33?44?78?5?67?27?49?23?340?
學生30班級377?117?51?75?74?43?25?2?24?488?
學生31班級176?140?148?50?100?33?83?81?23?734?
學生32班級129?25?146?28?79?73?47?8?91?526?
學生33班級296?44?121?3?4?94?17?20?19?418?
學生34班級297?48?68?82?39?16?24?79?79?532?
學生35班級3126?69?40?13?48?34?81?5?97?513?
學生36班級1144?24?18?71?58?21?12?95?45?488?
學生37班級123?94?93?78?46?88?72?15?90?599?
學生38班級273?103?45?17?69?18?3?67?55?450?
學生39班級319?16?36?18?50?48?19?75?24?305?
學生40班級16?44?50?73?58?21?84?49?68?453?
學生41班級294?98?24?34?52?27?87?95?1?512?
學生42班級227?68?60?75?93?4?38?44?27?436?
學生43班級3102?146?138?72?58?19?34?57?60?686?
學生44班級251?81?150?95?8?48?96?90?66?685?
學生45班級193?37?109?84?100?59?90?59?81?712?
學生46班級2125?60?32?70?93?65?74?44?77?640?
學生47班級1139?45?52?54?6?64?46?45?66?517?
學生48班級214?73?118?4?36?43?24?8?73?393?
學生49班級345?114?114?6?65?94?32?30?1?501?
學生50班級2112?77?19?33?30?32?90?18?77?488?
學生51班級219?66?140?36?44?34?62?17?34?452?
學生52班級261?98?107?78?2?17?54?28?89?534?
學生53班級148?23?65?23?70?58?36?45?75?443?
學生54班級181?9?46?37?86?87?83?39?63?531?
學生55班級148?23?145?53?2?9?80?35?31?426?
學生56班級1117?92?44?65?3?98?0?70?67?556?
學生57班級3148?25?63?29?96?34?34?34?92?555?
學生58班級151?22?97?58?80?16?19?91?20?454?
學生59班級2118?1?20?62?26?93?77?66?34?497?
學生60班級3129?19?109?78?33?15?74?67?58?582?
學生61班級3112?68?65?15?79?63?97?72?85?656?
學生62班級3117?14?73?6?6?98?3?81?2?400?
學生63班級187?103?0?2?30?21?43?87?25?398?
學生64班級265?79?49?53?86?33?57?99?83?604?
學生65班級2144?7?122?47?11?76?64?66?71?608?
學生66班級218?140?96?54?10?6?45?41?85?495?
學生67班級230?14?70?20?44?25?77?97?20?397?
學生68班級360?7?147?38?7?53?88?54?92?546?
學生69班級286?115?23?90?52?50?89?79?42?626?
學生70班級3132?25?21?25?44?86?58?61?3?455?
學生71班級3149?102?68?98?96?7?95?25?47?687?
學生72班級228?138?74?30?0?43?95?57?68?533?
學生73班級354?148?81?40?86?23?91?73?95?691?
學生74班級1143?39?76?5?55?90?31?18?95?552?
學生75班級283?95?48?86?61?97?68?84?24?646?
學生76班級1138?1?141?9?50?1?14?5?11?370?
學生77班級325?33?46?25?62?93?41?43?75?443?
學生78班級118?114?93?22?38?73?66?69?79?572?
學生79班級384?10?72?94?30?95?32?41?56?514?
學生80班級2113?39?10?23?28?33?32?7?23?308?
學生81班級383?36?13?13?89?15?39?71?72?431?
學生82班級352?68?39?22?16?9?75?37?95?413?
學生83班級390?0?132?20?36?86?69?39?95?567?
學生84班級161?89?67?10?33?31?99?34?4?428?
學生85班級183?93?105?79?19?30?0?84?7?500?
學生86班級188?143?19?56?9?56?36?89?77?573?
學生87班級170?0?115?66?36?76?0?16?89?468?
學生88班級317?60?49?80?12?99?30?8?1?356?
學生89班級1129?128?48?76?47?46?46?89?1?610?
學生90班級3143?14?86?1?69?55?85?3?43?499?
學生91班級244?127?143?22?7?18?62?33?44?500?
學生92班級137?41?130?71?17?61?68?1?19?445?
學生93班級345?17?22?10?90?1?83?31?11?310?
學生94班級219?40?99?59?77?1?90?9?68?462?
學生95班級1126?19?68?91?53?68?23?87?85?620?
學生96班級1131?126?126?53?13?18?70?85?33?655?
學生97班級153?47?33?87?98?98?62?28?95?601?
學生98班級1107?88?49?91?6?17?66?24?58?506?
學生99班級1118?145?69?4?70?29?43?13?45?536?
學生100班級248?8?115?63?93?53?91?59?93?623?
姓名班級成績主科文科理科總分語文數學英語政治歷史地理物理化學生物
學生1班級364?104?150?93?32?82?26?44?83?678?
學生2班級2120?66?150?85?5?50?72?32?90?670?
學生3班級2133?61?49?97?67?13?64?8?60?552?
學生4班級37?136?105?86?56?11?98?29?18?546?
學生5班級2129?146?62?64?67?1?70?57?16?612?
學生6班級245?29?51?91?9?2?37?3?26?293?
學生7班級128?25?127?96?43?90?75?13?28?525?
學生8班級378?64?20?29?70?92?100?69?30?552?
學生9班級265?10?139?19?57?86?57?79?76?588?
學生10班級2113?142?4?100?41?69?12?45?20?546?
學生11班級341?84?42?23?89?88?6?4?21?398?
學生12班級14?102?111?61?76?12?25?66?39?496?
學生13班級249?144?56?75?18?58?39?13?88?540?
學生14班級1119?81?73?53?37?88?79?69?30?629?
學生15班級3120?78?86?58?50?7?20?42?24?485?
學生16班級165?71?9?64?45?31?18?53?5?361?
學生17班級172?139?24?20?39?49?19?21?23?406?
學生18班級350?84?53?70?77?81?38?80?25?558?
學生19班級156?147?134?59?57?31?48?86?7?625?
學生20班級1103?38?96?100?21?88?36?37?18?537?
學生21班級1133?150?28?37?96?88?12?36?87?667?
學生22班級2140?59?42?95?94?50?3?58?63?604?
學生23班級12?51?19?17?19?7?93?35?49?292?
學生24班級367?2?91?23?22?37?79?52?63?436?
學生25班級329?17?149?44?13?29?98?70?6?455?
學生26班級3126?117?112?11?100?55?87?1?18?627?
學生27班級3144?115?131?97?19?92?79?4?72?753?
學生28班級2107?77?143?94?89?90?35?70?3?708?
學生29班級314?33?44?78?5?67?27?49?23?340?
學生30班級377?117?51?75?74?43?25?2?24?488?
學生31班級176?140?148?50?100?33?83?81?23?734?
學生32班級129?25?146?28?79?73?47?8?91?526?
學生33班級296?44?121?3?4?94?17?20?19?418?
學生34班級297?48?68?82?39?16?24?79?79?532?
學生35班級3126?69?40?13?48?34?81?5?97?513?
學生36班級1144?24?18?71?58?21?12?95?45?488?
學生37班級123?94?93?78?46?88?72?15?90?599?
學生38班級273?103?45?17?69?18?3?67?55?450?
學生39班級319?16?36?18?50?48?19?75?24?305?
學生40班級16?44?50?73?58?21?84?49?68?453?
學生41班級294?98?24?34?52?27?87?95?1?512?
學生42班級227?68?60?75?93?4?38?44?27?436?
學生43班級3102?146?138?72?58?19?34?57?60?686?
學生44班級251?81?150?95?8?48?96?90?66?685?
學生45班級193?37?109?84?100?59?90?59?81?712?
學生46班級2125?60?32?70?93?65?74?44?77?640?
學生47班級1139?45?52?54?6?64?46?45?66?517?
學生48班級214?73?118?4?36?43?24?8?73?393?
學生49班級345?114?114?6?65?94?32?30?1?501?
學生50班級2112?77?19?33?30?32?90?18?77?488?
學生51班級219?66?140?36?44?34?62?17?34?452?
學生52班級261?98?107?78?2?17?54?28?89?534?
學生53班級148?23?65?23?70?58?36?45?75?443?
學生54班級181?9?46?37?86?87?83?39?63?531?
學生55班級148?23?145?53?2?9?80?35?31?426?
學生56班級1117?92?44?65?3?98?0?70?67?556?
學生57班級3148?25?63?29?96?34?34?34?92?555?
學生58班級151?22?97?58?80?16?19?91?20?454?
學生59班級2118?1?20?62?26?93?77?66?34?497?
學生60班級3129?19?109?78?33?15?74?67?58?582?
學生61班級3112?68?65?15?79?63?97?72?85?656?
學生62班級3117?14?73?6?6?98?3?81?2?400?
學生63班級187?103?0?2?30?21?43?87?25?398?
學生64班級265?79?49?53?86?33?57?99?83?604?
學生65班級2144?7?122?47?11?76?64?66?71?608?
學生66班級218?140?96?54?10?6?45?41?85?495?
學生67班級230?14?70?20?44?25?77?97?20?397?
學生68班級360?7?147?38?7?53?88?54?92?546?
學生69班級286?115?23?90?52?50?89?79?42?626?
學生70班級3132?25?21?25?44?86?58?61?3?455?
學生71班級3149?102?68?98?96?7?95?25?47?687?
學生72班級228?138?74?30?0?43?95?57?68?533?
學生73班級354?148?81?40?86?23?91?73?95?691?
學生74班級1143?39?76?5?55?90?31?18?95?552?
學生75班級283?95?48?86?61?97?68?84?24?646?
學生76班級1138?1?141?9?50?1?14?5?11?370?
學生77班級325?33?46?25?62?93?41?43?75?443?
學生78班級118?114?93?22?38?73?66?69?79?572?
學生79班級384?10?72?94?30?95?32?41?56?514?
學生80班級2113?39?10?23?28?33?32?7?23?308?
學生81班級383?36?13?13?89?15?39?71?72?431?
學生82班級352?68?39?22?16?9?75?37?95?413?
學生83班級390?0?132?20?36?86?69?39?95?567?
學生84班級161?89?67?10?33?31?99?34?4?428?
學生85班級183?93?105?79?19?30?0?84?7?500?
學生86班級188?143?19?56?9?56?36?89?77?573?
學生87班級170?0?115?66?36?76?0?16?89?468?
學生88班級317?60?49?80?12?99?30?8?1?356?
學生89班級1129?128?48?76?47?46?46?89?1?610?
學生90班級3143?14?86?1?69?55?85?3?43?499?
學生91班級244?127?143?22?7?18?62?33?44?500?
學生92班級137?41?130?71?17?61?68?1?19?445?
學生93班級345?17?22?10?90?1?83?31?11?310?
學生94班級219?40?99?59?77?1?90?9?68?462?
學生95班級1126?19?68?91?53?68?23?87?85?620?
學生96班級1131?126?126?53?13?18?70?85?33?655?
學生97班級153?47?33?87?98?98?62?28?95?601?
學生98班級1107?88?49?91?6?17?66?24?58?506?
學生99班級1118?145?69?4?70?29?43?13?45?536?
學生100班級248?8?115?63?93?53?91?59?93?623?
姓名班級成績主科文科理科總分語文數學英語政治歷史地理物理化學生物
學生1班級364?104?150?93?32?82?26?44?83?678?
學生2班級2120?66?150?85?5?50?72?32?90?670?
學生3班級2133?61?49?97?67?13?64?8?60?552?
學生4班級37?136?105?86?56?11?98?29?18?546?
學生5班級2129?146?62?64?67?1?70?57?16?612?
學生6班級245?29?51?91?9?2?37?3?26?293?
學生7班級128?25?127?96?43?90?75?13?28?525?
學生8班級378?64?20?29?70?92?100?69?30?552?
學生9班級265?10?139?19?57?86?57?79?76?588?
學生10班級2113?142?4?100?41?69?12?45?20?546?
學生11班級341?84?42?23?89?88?6?4?21?398?
學生12班級14?102?111?61?76?12?25?66?39?496?
學生13班級249?144?56?75?18?58?39?13?88?540?
學生14班級1119?81?73?53?37?88?79?69?30?629?
學生15班級3120?78?86?58?50?7?20?42?24?485?
學生16班級165?71?9?64?45?31?18?53?5?361?
學生17班級172?139?24?20?39?49?19?21?23?406?
學生18班級350?84?53?70?77?81?38?80?25?558?
學生19班級156?147?134?59?57?31?48?86?7?625?
學生20班級1103?38?96?100?21?88?36?37?18?537?
學生21班級1133?150?28?37?96?88?12?36?87?667?
學生22班級2140?59?42?95?94?50?3?58?63?604?
學生23班級12?51?19?17?19?7?93?35?49?292?
學生24班級367?2?91?23?22?37?79?52?63?436?
學生25班級329?17?149?44?13?29?98?70?6?455?
學生26班級3126?117?112?11?100?55?87?1?18?627?
學生27班級3144?115?131?97?19?92?79?4?72?753?
學生28班級2107?77?143?94?89?90?35?70?3?708?
學生29班級314?33?44?78?5?67?27?49?23?340?
學生30班級377?117?51?75?74?43?25?2?24?488?
學生31班級176?140?148?50?100?33?83?81?23?734?
學生32班級129?25?146?28?79?73?47?8?91?526?
學生33班級296?44?121?3?4?94?17?20?19?418?
學生34班級297?48?68?82?39?16?24?79?79?532?
學生35班級3126?69?40?13?48?34?81?5?97?513?
學生36班級1144?24?18?71?58?21?12?95?45?488?
學生37班級123?94?93?78?46?88?72?15?90?599?
學生38班級273?103?45?17?69?18?3?67?55?450?
學生39班級319?16?36?18?50?48?19?75?24?305?
學生40班級16?44?50?73?58?21?84?49?68?453?
學生41班級294?98?24?34?52?27?87?95?1?512?
學生42班級227?68?60?75?93?4?38?44?27?436?
學生43班級3102?146?138?72?58?19?34?57?60?686?
學生44班級251?81?150?95?8?48?96?90?66?685?
學生45班級193?37?109?84?100?59?90?59?81?712?
學生46班級2125?60?32?70?93?65?74?44?77?640?
學生47班級1139?45?52?54?6?64?46?45?66?517?
學生48班級214?73?118?4?36?43?24?8?73?393?
學生49班級345?114?114?6?65?94?32?30?1?501?
學生50班級2112?77?19?33?30?32?90?18?77?488?
學生51班級219?66?140?36?44?34?62?17?34?452?
學生52班級261?98?107?78?2?17?54?28?89?534?
學生53班級148?23?65?23?70?58?36?45?75?443?
學生54班級181?9?46?37?86?87?83?39?63?531?
學生55班級148?23?145?53?2?9?80?35?31?426?
學生56班級1117?92?44?65?3?98?0?70?67?556?
學生57班級3148?25?63?29?96?34?34?34?92?555?
學生58班級151?22?97?58?80?16?19?91?20?454?
學生59班級2118?1?20?62?26?93?77?66?34?497?
學生60班級3129?19?109?78?33?15?74?67?58?582?
學生61班級3112?68?65?15?79?63?97?72?85?656?
學生62班級3117?14?73?6?6?98?3?81?2?400?
學生63班級187?103?0?2?30?21?43?87?25?398?
學生64班級265?79?49?53?86?33?57?99?83?604?
學生65班級2144?7?122?47?11?76?64?66?71?608?
學生66班級218?140?96?54?10?6?45?41?85?495?
學生67班級230?14?70?20?44?25?77?97?20?397?
學生68班級360?7?147?38?7?53?88?54?92?546?
學生69班級286?115?23?90?52?50?89?79?42?626?
學生70班級3132?25?21?25?44?86?58?61?3?455?
學生71班級3149?102?68?98?96?7?95?25?47?687?
學生72班級228?138?74?30?0?43?95?57?68?533?
學生73班級354?148?81?40?86?23?91?73?95?691?
學生74班級1143?39?76?5?55?90?31?18?95?552?
學生75班級283?95?48?86?61?97?68?84?24?646?
學生76班級1138?1?141?9?50?1?14?5?11?370?
學生77班級325?33?46?25?62?93?41?43?75?443?
學生78班級118?114?93?22?38?73?66?69?79?572?
學生79班級384?10?72?94?30?95?32?41?56?514?
學生80班級2113?39?10?23?28?33?32?7?23?308?
學生81班級383?36?13?13?89?15?39?71?72?431?
學生82班級352?68?39?22?16?9?75?37?95?413?
學生83班級390?0?132?20?36?86?69?39?95?567?
學生84班級161?89?67?10?33?31?99?34?4?428?
學生85班級183?93?105?79?19?30?0?84?7?500?
學生86班級188?143?19?56?9?56?36?89?77?573?
學生87班級170?0?115?66?36?76?0?16?89?468?
學生88班級317?60?49?80?12?99?30?8?1?356?
學生89班級1129?128?48?76?47?46?46?89?1?610?
學生90班級3143?14?86?1?69?55?85?3?43?499?
學生91班級244?127?143?22?7?18?62?33?44?500?
學生92班級137?41?130?71?17?61?68?1?19?445?
學生93班級345?17?22?10?90?1?83?31?11?310?
學生94班級219?40?99?59?77?1?90?9?68?462?
學生95班級1126?19?68?91?53?68?23?87?85?620?
學生96班級1131?126?126?53?13?18?70?85?33?655?
學生97班級153?47?33?87?98?98?62?28?95?601?
學生98班級1107?88?49?91?6?17?66?24?58?506?
學生99班級1118?145?69?4?70?29?43?13?45?536?
學生100班級248?8?115?63?93?53?91?59?93?623?
姓名班級成績主科文科理科總分語文數學英語政治歷史地理物理化學生物
學生1班級364?104?150?93?32?82?26?44?83?678?
學生2班級2120?66?150?85?5?50?72?32?90?670?
學生3班級2133?61?49?97?67?13?64?8?60?552?
學生4班級37?136?105?86?56?11?98?29?18?546?
學生5班級2129?146?62?64?67?1?70?57?16?612?
學生6班級245?29?51?91?9?2?37?3?26?293?
學生7班級128?25?127?96?43?90?75?13?28?525?
學生8班級378?64?20?29?70?92?100?69?30?552?
學生9班級265?10?139?19?57?86?57?79?76?588?
學生10班級2113?142?4?100?41?69?12?45?20?546?
學生11班級341?84?42?23?89?88?6?4?21?398?
學生12班級14?102?111?61?76?12?25?66?39?496?
學生13班級249?144?56?75?18?58?39?13?88?540?
學生14班級1119?81?73?53?37?88?79?69?30?629?
學生15班級3120?78?86?58?50?7?20?42?24?485?
學生16班級165?71?9?64?45?31?18?53?5?361?
學生17班級172?139?24?20?39?49?19?21?23?406?
學生18班級350?84?53?70?77?81?38?80?25?558?
學生19班級156?147?134?59?57?31?48?86?7?625?
學生20班級1103?38?96?100?21?88?36?37?18?537?
學生21班級1133?150?28?37?96?88?12?36?87?667?
學生22班級2140?59?42?95?94?50?3?58?63?604?
學生23班級12?51?19?17?19?7?93?35?49?292?
學生24班級367?2?91?23?22?37?79?52?63?436?
學生25班級329?17?149?44?13?29?98?70?6?455?
學生26班級3126?117?112?11?100?55?87?1?18?627?
學生27班級3144?115?131?97?19?92?79?4?72?753?
學生28班級2107?77?143?94?89?90?35?70?3?708?
學生29班級314?33?44?78?5?67?27?49?23?340?
學生30班級377?117?51?75?74?43?25?2?24?488?
學生31班級176?140?148?50?100?33?83?81?23?734?
學生32班級129?25?146?28?79?73?47?8?91?526?
學生33班級296?44?121?3?4?94?17?20?19?418?
學生34班級297?48?68?82?39?16?24?79?79?532?
學生35班級3126?69?40?13?48?34?81?5?97?513?
學生36班級1144?24?18?71?58?21?12?95?45?488?
學生37班級123?94?93?78?46?88?72?15?90?599?
學生38班級273?103?45?17?69?18?3?67?55?450?
學生39班級319?16?36?18?50?48?19?75?24?305?
學生40班級16?44?50?73?58?21?84?49?68?453?
學生41班級294?98?24?34?52?27?87?95?1?512?
學生42班級227?68?60?75?93?4?38?44?27?436?
學生43班級3102?146?138?72?58?19?34?57?60?686?
學生44班級251?81?150?95?8?48?96?90?66?685?
學生45班級193?37?109?84?100?59?90?59?81?712?
學生46班級2125?60?32?70?93?65?74?44?77?640?
學生47班級1139?45?52?54?6?64?46?45?66?517?
學生48班級214?73?118?4?36?43?24?8?73?393?
學生49班級345?114?114?6?65?94?32?30?1?501?
學生50班級2112?77?19?33?30?32?90?18?77?488?
學生51班級219?66?140?36?44?34?62?17?34?452?
學生52班級261?98?107?78?2?17?54?28?89?534?
學生53班級148?23?65?23?70?58?36?45?75?443?
學生54班級181?9?46?37?86?87?83?39?63?531?
學生55班級148?23?145?53?2?9?80?35?31?426?
學生56班級1117?92?44?65?3?98?0?70?67?556?
學生57班級3148?25?63?29?96?34?34?34?92?555?
學生58班級151?22?97?58?80?16?19?91?20?454?
學生59班級2118?1?20?62?26?93?77?66?34?497?
學生60班級3129?19?109?78?33?15?74?67?58?582?
學生61班級3112?68?65?15?79?63?97?72?85?656?
學生62班級3117?14?73?6?6?98?3?81?2?400?
學生63班級187?103?0?2?30?21?43?87?25?398?
學生64班級265?79?49?53?86?33?57?99?83?604?
學生65班級2144?7?122?47?11?76?64?66?71?608?
學生66班級218?140?96?54?10?6?45?41?85?495?
學生67班級230?14?70?20?44?25?77?97?20?397?
學生68班級360?7?147?38?7?53?88?54?92?546?
學生69班級286?115?23?90?52?50?89?79?42?626?
學生70班級3132?25?21?25?44?86?58?61?3?455?
學生71班級3149?102?68?98?96?7?95?25?47?687?
學生72班級228?138?74?30?0?43?95?57?68?533?
學生73班級354?148?81?40?86?23?91?73?95?691?
學生74班級1143?39?76?5?55?90?31?18?95?552?
學生75班級283?95?48?86?61?97?68?84?24?646?
學生76班級1138?1?141?9?50?1?14?5?11?370?
學生77班級325?33?46?25?62?93?41?43?75?443?
學生78班級118?114?93?22?38?73?66?69?79?572?
學生79班級384?10?72?94?30?95?32?41?56?514?
學生80班級2113?39?10?23?28?33?32?7?23?308?
學生81班級383?36?13?13?89?15?39?71?72?431?
學生82班級352?68?39?22?16?9?75?37?95?413?
學生83班級390?0?132?20?36?86?69?39?95?567?
學生84班級161?89?67?10?33?31?99?34?4?428?
學生85班級183?93?105?79?19?30?0?84?7?500?
學生86班級188?143?19?56?9?56?36?89?77?573?
學生87班級170?0?115?66?36?76?0?16?89?468?
學生88班級317?60?49?80?12?99?30?8?1?356?
學生89班級1129?128?48?76?47?46?46?89?1?610?
學生90班級3143?14?86?1?69?55?85?3?43?499?
學生91班級244?127?143?22?7?18?62?33?44?500?
學生92班級137?41?130?71?17?61?68?1?19?445?
學生93班級345?17?22?10?90?1?83?31?11?310?
學生94班級219?40?99?59?77?1?90?9?68?462?
學生95班級1126?19?68?91?53?68?23?87?85?620?
學生96班級1131?126?126?53?13?18?70?85?33?655?
學生97班級153?47?33?87?98?98?62?28?95?601?
學生98班級1107?88?49?91?6?17?66?24?58?506?
學生99班級1118?145?69?4?70?29?43?13?45?536?
學生100班級248?8?115?63?93?53?91?59?93?623?

二、整體的框架

1、最下面的是原始的Table。

2、用左邊的table覆蓋在上層，命名為tableColumn。

3、用上部的table覆蓋在更上層，命名為tableHead。

4、在左上角覆蓋固定不動的table，命名為tableFix。

自然在各自的外層都要用div框起來，以便后面的浮動和覆蓋等等，所以結構的html如下：

<div?id="MyTable_tableLayout"> <div?id="MyTable_tableFix"> <table?id="MyTable_tableFixClone"?border="1"?cellspacing="0"?cellpadding="0"></table> </div> <div?id="MyTable_tableHead"> <table?id="MyTable_tableHeadClone"?border="1"?cellspacing="0"?cellpadding="0"></table> </div> <div?id="MyTable_tableColumn"> <table?id="MyTable_tableColumnClone"?border="1"?cellspacing="0"?cellpadding="0"></table> </div> <div?id="MyTable_tableData"> <table?id="MyTable"?border="1"?cellspacing="0"?cellpadding="0"></table> </div> </div>

三、代碼實現

整體框架結構出來后，下面要做的就是確定每個區域的高度，寬度，定位就算完成了。

首先確定下調用接口，調用時已經有table了，我們希望很簡單的一行js即可高定，就用了一個方法實現。由于使用項目中table線寬全部都是1，所以未考慮其他線寬問題。

function FixTable(TableID, FixColumnNumber, width, height)

第一個參數：table的ID，第二個參數：要鎖定的列數目，第三個參數：顯示的寬度，第四個參數：顯示的高度。

（一）首先創建上面所訴的框架出來：

if ($("#" + TableID + "_tableLayout").length != 0) { $("#" + TableID + "_tableLayout").before($("#" + TableID)); $("#" + TableID + "_tableLayout").empty(); } else { $("#" + TableID).after("<div id='" + TableID + "_tableLayout' style='overflow:hidden;height:" + height + "px; width:" + width + "px;'></div>"); } $('<div id="' + TableID + '_tableFix"></div>' + '<div id="' + TableID + '_tableHead"></div>' + '<div id="' + TableID + '_tableColumn"></div>' + '<div id="' + TableID + '_tableData"></div>').appendTo("#" + TableID + "_tableLayout"); var oldtable = $("#" + TableID); var tableFixClone = oldtable.clone(true); tableFixClone.attr("id", TableID + "_tableFixClone"); $("#" + TableID + "_tableFix").append(tableFixClone); var tableHeadClone = oldtable.clone(true); tableHeadClone.attr("id", TableID + "_tableHeadClone"); $("#" + TableID + "_tableHead").append(tableHeadClone); var tableColumnClone = oldtable.clone(true); tableColumnClone.attr("id", TableID + "_tableColumnClone"); $("#" + TableID + "_tableColumn").append(tableColumnClone); $("#" + TableID + "_tableData").append(oldtable); $("#" + TableID + "_tableLayout table").each(function () { $(this).css("margin", "0"); });

（二）計算tableFix，tableHead的高度：

var HeadHeight = $("#" + TableID + "_tableHead thead").height(); HeadHeight += 2; $("#" + TableID + "_tableHead").css("height", HeadHeight); $("#" + TableID + "_tableFix").css("height", HeadHeight);

（三）計算tableFix，tableColumn的寬度：

var ColumnsWidth = 0; var ColumnsNumber = 0; $("#" + TableID + "_tableColumn tr:last td:lt(" + FixColumnNumber + ")").each(function () { ColumnsWidth += $(this).outerWidth(true); ColumnsNumber++; }); ColumnsWidth += 2; if ($.browser.msie) { switch ($.browser.version) { case?"7.0": if (ColumnsNumber >= 3) ColumnsWidth--; break; case?"8.0": if (ColumnsNumber >= 2) ColumnsWidth--; break; } } $("#" + TableID + "_tableColumn").css("width", ColumnsWidth); $("#" + TableID + "_tableFix").css("width", ColumnsWidth);

（四）為tableHead和tableColumn添加聯動的滾動條事件：

$("#" + TableID + "_tableData").scroll(function () { $("#" + TableID + "_tableHead").scrollLeft($("#" + TableID + "_tableData").scrollLeft()); $("#" + TableID + "_tableColumn").scrollTop($("#" + TableID + "_tableData").scrollTop()); });

（五）為較小的table修正樣式：

if ($("#" + TableID + "_tableHead").width() > $("#" + TableID + "_tableHead table").width()) { $("#" + TableID + "_tableHead").css("width", $("#" + TableID + "_tableHead table").width()); $("#" + TableID + "_tableData").css("width", $("#" + TableID + "_tableHead table").width() + 17); } if ($("#" + TableID + "_tableColumn").height() > $("#" + TableID + "_tableColumn table").height()) { $("#" + TableID + "_tableColumn").css("height", $("#" + TableID + "_tableColumn table").height()); $("#" + TableID + "_tableData").css("height", $("#" + TableID + "_tableColumn table").height() + 17); }

（六）為整體添加樣式，定位：

$("#" + TableID + "_tableFix").css({ "overflow": "hidden", "position": "relative", "z-index": "50", "background-color": "Silver" }); $("#" + TableID + "_tableHead").css({ "overflow": "hidden", "width": width - 17, "position": "relative", "z-index": "45", "background-color": "Silver" }); $("#" + TableID + "_tableColumn").css({ "overflow": "hidden", "height": height - 17, "position": "relative", "z-index": "40", "background-color": "Silver" }); $("#" + TableID + "_tableData").css({ "overflow": "scroll", "width": width, "height": height, "position": "relative", "z-index": "35" }); $("#" + TableID + "_tableFix").offset($("#" + TableID + "_tableLayout").offset()); $("#" + TableID + "_tableHead").offset($("#" + TableID + "_tableLayout").offset()); $("#" + TableID + "_tableColumn").offset($("#" + TableID + "_tableLayout").offset()); $("#" + TableID + "_tableData").offset($("#" + TableID + "_tableLayout").offset());

完整代碼如下:

View Code?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 function FixTable(TableID, FixColumnNumber, width, height) { ????/// <summary> ????///???? 鎖定表頭和列 ????///???? <para> sorex.cnblogs.com </para> ????/// </summary> ????/// <param name="TableID" type="String"> ????///???? 要鎖定的Table的ID ????/// </param> ????/// <param name="FixColumnNumber" type="Number"> ????///???? 要鎖定列的個數 ????/// </param> ????/// <param name="width" type="Number"> ????///???? 顯示的寬度 ????/// </param> ????/// <param name="height" type="Number"> ????///???? 顯示的高度 ????/// </param> ????if ($("#" + TableID + "_tableLayout").length != 0) { ????????$("#" + TableID + "_tableLayout").before($("#" + TableID)); ????????$("#" + TableID + "_tableLayout").empty(); ????} ????else { ????????$("#" + TableID).after("<div id='" + TableID + "_tableLayout' style='overflow:hidden;height:" + height + "px; width:" + width + "px;'></div>"); ????} ?? ????$('<div id="' + TableID + '_tableFix"></div>' ????+ '<div id="' + TableID + '_tableHead"></div>' ????+ '<div id="' + TableID + '_tableColumn"></div>' ????+ '<div id="' + TableID + '_tableData"></div>').appendTo("#" + TableID + "_tableLayout"); ?? ?? ????var oldtable = $("#" + TableID); ?? ????var tableFixClone = oldtable.clone(true); ????tableFixClone.attr("id", TableID + "_tableFixClone"); ????$("#" + TableID + "_tableFix").append(tableFixClone); ????var tableHeadClone = oldtable.clone(true); ????tableHeadClone.attr("id", TableID + "_tableHeadClone"); ????$("#" + TableID + "_tableHead").append(tableHeadClone); ????var tableColumnClone = oldtable.clone(true); ????tableColumnClone.attr("id", TableID + "_tableColumnClone"); ????$("#" + TableID + "_tableColumn").append(tableColumnClone); ????$("#" + TableID + "_tableData").append(oldtable); ?? ????$("#" + TableID + "_tableLayout table").each(function () { ????????$(this).css("margin", "0"); ????}); ?? ?? ????var HeadHeight = $("#" + TableID + "_tableHead thead").height(); ????HeadHeight += 2; ????$("#" + TableID + "_tableHead").css("height", HeadHeight); ????$("#" + TableID + "_tableFix").css("height", HeadHeight); ?? ?? ????var ColumnsWidth = 0; ????var ColumnsNumber = 0; ????$("#" + TableID + "_tableColumn tr:last td:lt(" + FixColumnNumber + ")").each(function () { ????????ColumnsWidth += $(this).outerWidth(true); ????????ColumnsNumber++; ????}); ????ColumnsWidth += 2; ????if ($.browser.msie) { ????????switch ($.browser.version) { ????????????case "7.0": ????????????????if (ColumnsNumber >= 3) ColumnsWidth--; ????????????????break; ????????????case "8.0": ????????????????if (ColumnsNumber >= 2) ColumnsWidth--; ????????????????break; ????????} ????} ????$("#" + TableID + "_tableColumn").css("width", ColumnsWidth); ????$("#" + TableID + "_tableFix").css("width", ColumnsWidth); ?? ?? ????$("#" + TableID + "_tableData").scroll(function () { ????????$("#" + TableID + "_tableHead").scrollLeft($("#" + TableID + "_tableData").scrollLeft()); ????????$("#" + TableID + "_tableColumn").scrollTop($("#" + TableID + "_tableData").scrollTop()); ????}); ?? ????$("#" + TableID + "_tableFix").css({ "overflow": "hidden", "position": "relative", "z-index": "50", "background-color": "Silver" }); ????$("#" + TableID + "_tableHead").css({ "overflow": "hidden", "width": width - 17, "position": "relative", "z-index": "45", "background-color": "Silver" }); ????$("#" + TableID + "_tableColumn").css({ "overflow": "hidden", "height": height - 17, "position": "relative", "z-index": "40", "background-color": "Silver" }); ????$("#" + TableID + "_tableData").css({ "overflow": "scroll", "width": width, "height": height, "position": "relative", "z-index": "35" }); ?? ????if ($("#" + TableID + "_tableHead").width() > $("#" + TableID + "_tableFix table").width()) { ????????$("#" + TableID + "_tableHead").css("width", $("#" + TableID + "_tableFix table").width()); ????????$("#" + TableID + "_tableData").css("width", $("#" + TableID + "_tableFix table").width() + 17); ????} ????if ($("#" + TableID + "_tableColumn").height() > $("#" + TableID + "_tableColumn table").height()) { ????????$("#" + TableID + "_tableColumn").css("height", $("#" + TableID + "_tableColumn table").height()); ????????$("#" + TableID + "_tableData").css("height", $("#" + TableID + "_tableColumn table").height() + 17); ????} ?? ????$("#" + TableID + "_tableFix").offset($("#" + TableID + "_tableLayout").offset()); ????$("#" + TableID + "_tableHead").offset($("#" + TableID + "_tableLayout").offset()); ????$("#" + TableID + "_tableColumn").offset($("#" + TableID + "_tableLayout").offset()); ????$("#" + TableID + "_tableData").offset($("#" + TableID + "_tableLayout").offset()); }

ps:之前的代碼有點bug，在高度不夠的時候定位會產生錯誤，在此修正了。

?

?

?

轉載于:https://www.cnblogs.com/lteal/archive/2012/12/03/2799574.html

總結

以上是生活随笔為你收集整理的锁定表头和固定列(Fixed table head and columns)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。