[转] js实现html table 行，列锁定_html/css_WEB-ITnose
js实现html table 表头，指定列锁定
实现效果如下：
感兴趣的朋友可以直接复制出来运行看效果。
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>new document</title> 5 <script type="text/javascript" 6 src="http://code.jquery.com/jquery-1.6.1.min.js"></script> 7 8 <script type="text/javascript"> 9 function FixTable(TableID, FixColumnNumber, width, height) { 10 /// <summary> 11 /// 锁定表头和列 12 /// <para> sorex.cnblogs.com </para> 13 /// </summary> 14 /// <param name="TableID" type="String"> 15 /// 要锁定的Table的ID 16 /// </param> 17 /// <param name="FixColumnNumber" type="Number"> 18 /// 要锁定列的个数 19 /// </param> 20 /// <param name="width" type="Number"> 21 /// 显示的宽度 22 /// </param> 23 /// <param name="height" type="Number"> 24 /// 显示的高度 25 /// </param> 26 if ($("#" + TableID + "_tableLayout").length != 0) { 27 $("#" + TableID + "_tableLayout").before($("#" + TableID)); 28 $("#" + TableID + "_tableLayout").empty(); 29 } 30 else { 31 $("#" + TableID).after("<div id='" + TableID + "_tableLayout' style='overflow:hidden;height:" + height + "px; width:" + width + "px;'></div>"); 32 } 33 $('<div id="' + TableID + '_tableFix"></div>' 34 + '<div id="' + TableID + '_tableHead"></div>' 35 + '<div id="' + TableID + '_tableColumn"></div>' 36 + '<div id="' + TableID + '_tableData"></div>').appendTo("#" + TableID + "_tableLayout"); 37 var oldtable = $("#" + TableID); 38 var tableFixClone = oldtable.clone(true); 39 tableFixClone.attr("id", TableID + "_tableFixClone"); 40 $("#" + TableID + "_tableFix").append(tableFixClone); 41 var tableHeadClone = oldtable.clone(true); 42 tableHeadClone.attr("id", TableID + "_tableHeadClone"); 43 $("#" + TableID + "_tableHead").append(tableHeadClone); 44 var tableColumnClone = oldtable.clone(true); 45 tableColumnClone.attr("id", TableID + "_tableColumnClone"); 46 $("#" + TableID + "_tableColumn").append(tableColumnClone); 47 $("#" + TableID + "_tableData").append(oldtable); 48 $("#" + TableID + "_tableLayout table").each(function () { 49 $(this).css("margin", "0"); 50 }); 51 var HeadHeight = $("#" + TableID + "_tableHead thead").height(); 52 HeadHeight += 2; 53 $("#" + TableID + "_tableHead").css("height", HeadHeight); 54 $("#" + TableID + "_tableFix").css("height", HeadHeight); 55 var ColumnsWidth = 0; 56 var ColumnsNumber = 0; 57 $("#" + TableID + "_tableColumn tr:last td:lt(" + FixColumnNumber + ")").each(function () { 58 ColumnsWidth += $(this).outerWidth(true); 59 ColumnsNumber++; 60 }); 61 ColumnsWidth += 2; 62 if ($.browser.msie) { 63 switch ($.browser.version) { 64 case "7.0": 65 if (ColumnsNumber >= 3) ColumnsWidth--; 66 break; 67 case "8.0": 68 if (ColumnsNumber >= 2) ColumnsWidth--; 69 break; 70 } 71 } 72 $("#" + TableID + "_tableColumn").css("width", ColumnsWidth); 73 $("#" + TableID + "_tableFix").css("width", ColumnsWidth); 74 $("#" + TableID + "_tableData").scroll(function () { 75 $("#" + TableID + "_tableHead").scrollLeft($("#" + TableID + "_tableData").scrollLeft()); 76 $("#" + TableID + "_tableColumn").scrollTop($("#" + TableID + "_tableData").scrollTop()); 77 }); 78 $("#" + TableID + "_tableFix").css({ "overflow": "hidden", "position": "relative", "z-index": "50", "background-color": "Silver" }); 79 $("#" + TableID + "_tableHead").css({ "overflow": "hidden", "width": width - 17, "position": "relative", "z-index": "45", "background-color": "Silver" }); 80 $("#" + TableID + "_tableColumn").css({ "overflow": "hidden", "height": height - 17, "position": "relative", "z-index": "40", "background-color": "Silver" }); 81 $("#" + TableID + "_tableData").css({ "overflow": "scroll", "width": width, "height": height, "position": "relative", "z-index": "35" }); 82 if ($("#" + TableID + "_tableHead").width() > $("#" + TableID + "_tableFix table").width()) { 83 $("#" + TableID + "_tableHead").css("width", $("#" + TableID + "_tableFix table").width()); 84 $("#" + TableID + "_tableData").css("width", $("#" + TableID + "_tableFix table").width() + 17); 85 } 86 if ($("#" + TableID + "_tableColumn").height() > $("#" + TableID + "_tableColumn table").height()) { 87 $("#" + TableID + "_tableColumn").css("height", $("#" + TableID + "_tableColumn table").height()); 88 $("#" + TableID + "_tableData").css("height", $("#" + TableID + "_tableColumn table").height() + 17); 89 } 90 $("#" + TableID + "_tableFix").offset($("#" + TableID + "_tableLayout").offset()); 91 $("#" + TableID + "_tableHead").offset($("#" + TableID + "_tableLayout").offset()); 92 $("#" + TableID + "_tableColumn").offset($("#" + TableID + "_tableLayout").offset()); 93 $("#" + TableID + "_tableData").offset($("#" + TableID + "_tableLayout").offset()); 94 } 95 $(document).ready(function () { 96 FixTable("MyTable", 1, 600, 400); 97 }); 98 </script> 99 </head>100 <body>101 <table style="border-bottom-color: black; border-top-color: black; width: 1000px; color: #000000; border-right-color: black; font-size: medium; border-left-color: black"102 id="MyTable" border="1" cellspacing="0" cellpadding="0">103 <thead>104 <tr>105 <th style="text-align: center; width: 80px" rowspan="3">姓名</th>106 <th style="text-align: center; width: 80px" rowspan="3">班级</th>107 <th style="text-align: center" colspan="10">成绩</th>108 </tr>109 <tr>110 <th style="text-align: center" colspan="3">主科</th>111 <th style="text-align: center" colspan="3">文科</th>112 <th style="text-align: center" colspan="3">理科</th>113 <th style="text-align: center; width: 80px" rowspan="2">总分</th>114 </tr>115 <tr>116 <th style="text-align: center; width: 80px">语文</th>117 <th style="text-align: center; width: 80px">数学</th>118 <th style="text-align: center; width: 80px">英语</th>119 <th style="text-align: center; width: 80px">政治</th>120 <th style="text-align: center; width: 80px">历史</th>121 <th style="text-align: center; width: 80px">地理</th>122 <th style="text-align: center; width: 80px">物理</th>123 <th style="text-align: center; width: 80px">化学</th>124 <th style="text-align: center; width: 80px">生物</th>125 </tr>126 <!--127 <tr>128 <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">129 姓名130 </th>131 <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">132 班级133 </th>134 <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">135 语文136 </th>137 <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">138 数学139 </th>140 <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">141 英语142 </th>143 <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">144 政治145 </th>146 <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">147 历史148 </th>149 <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">150 地理151 </th>152 <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">153 物理154 </th>155 <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">156 化学157 </th>158 <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">159 生物160 </th>161 <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;">162 总分163 </th>164 165 </tr>166 -->167 </thead>168 <tbody>169 <!-- 数据行 -->170 <tr>171 <td>学生32</td>172 <td>班级1</td>173 <td>29</td>174 <td>25</td>175 <td>146</td>176 <td>28</td>177 <td>79</td>178 <td>73</td>179 <td>47</td>180 <td>8</td>181 <td>91</td>182 <td>526</td>183 </tr>184 <tr>185 <td>学生32</td>186 <td>班级1</td>187 <td>29</td>188 <td>25</td>189 <td>146</td>190 <td>28</td>191 <td>79</td>192 <td>73</td>193 <td>47</td>194 <td>8</td>195 <td>91</td>196 <td>526</td>197 </tr>198 <tr>199 <td>学生32</td>200 <td>班级1</td>201 <td>29</td>202 <td>25</td>203 <td>146</td>204 <td>28</td>205 <td>79</td>206 <td>73</td>207 <td>47</td>208 <td>8</td>209 <td>91</td>210 <td>526</td>211 </tr>212 <tr>213 <td>学生32</td>214 <td>班级1</td>215 <td>29</td>216 <td>25</td>217 <td>146</td>218 <td>28</td>219 <td>79</td>220 <td>73</td>221 <td>47</td>222 <td>8</td>223 <td>91</td>224 <td>526</td>225 </tr>226 <tr>227 <td>学生32</td>228 <td>班级1</td>229 <td>29</td>230 <td>25</td>231 <td>146</td>232 <td>28</td>233 <td>79</td>234 <td>73</td>235 <td>47</td>236 <td>8</td>237 <td>91</td>238 <td>526</td>239 </tr>240 <tr>241 <td>学生32</td>242 <td>班级1</td>243 <td>29</td>244 <td>25</td>245 <td>146</td>246 <td>28</td>247 <td>79</td>248 <td>73</td>249 <td>47</td>250 <td>8</td>251 <td>91</td>252 <td>526</td>253 </tr>254 <tr>255 <td>学生32</td>256 <td>班级1</td>257 <td>29</td>258 <td>25</td>259 <td>146</td>260 <td>28</td>261 <td>79</td>262 <td>73</td>263 <td>47</td>264 <td>8</td>265 <td>91</td>266 <td>526</td>267 </tr>268 <tr>269 <td>学生32</td>270 <td>班级1</td>271 <td>29</td>272 <td>25</td>273 <td>146</td>274 <td>28</td>275 <td>79</td>276 <td>73</td>277 <td>47</td>278 <td>8</td>279 <td>91</td>280 <td>526</td>281 </tr>282 <tr>283 <td>学生32</td>284 <td>班级1</td>285 <td>29</td>286 <td>25</td>287 <td>146</td>288 <td>28</td>289 <td>79</td>290 <td>73</td>291 <td>47</td>292 <td>8</td>293 <td>91</td>294 <td>526</td>295 </tr>296 <tr>297 <td>学生32</td>298 <td>班级1</td>299 <td>29</td>300 <td>25</td>301 <td>146</td>302 <td>28</td>303 <td>79</td>304 <td>73</td>305 <td>47</td>306 <td>8</td>307 <td>91</td>308 <td>526</td>309 </tr>310 <tr>311 <td>学生32</td>312 <td>班级1</td>313 <td>29</td>314 <td>25</td>315 <td>146</td>316 <td>28</td>317 <td>79</td>318 <td>73</td>319 <td>47</td>320 <td>8</td>321 <td>91</td>322 <td>526</td>323 </tr>324 <tr>325 <td>学生32</td>326 <td>班级1</td>327 <td>29</td>328 <td>25</td>329 <td>146</td>330 <td>28</td>331 <td>79</td>332 <td>73</td>333 <td>47</td>334 <td>8</td>335 <td>91</td>336 <td>526</td>337 </tr>338 <tr>339 <td>学生32</td>340 <td>班级1</td>341 <td>29</td>342 <td>25</td>343 <td>146</td>344 <td>28</td>345 <td>79</td>346 <td>73</td>347 <td>47</td>348 <td>8</td>349 <td>91</td>350 <td>526</td>351 </tr>352 <tr>353 <td>学生32</td>354 <td>班级1</td>355 <td>29</td>356 <td>25</td>357 <td>146</td>358 <td>28</td>359 <td>79</td>360 <td>73</td>361 <td>47</td>362 <td>8</td>363 <td>91</td>364 <td>526</td>365 </tr>366 <tr>367 <td>学生32</td>368 <td>班级1</td>369 <td>29</td>370 <td>25</td>371 <td>146</td>372 <td>28</td>373 <td>79</td>374 <td>73</td>375 <td>47</td>376 <td>8</td>377 <td>91</td>378 <td>526</td>379 </tr>380 <tr>381 <td>学生32</td>382 <td>班级1</td>383 <td>29</td>384 <td>25</td>385 <td>146</td>386 <td>28</td>387 <td>79</td>388 <td>73</td>389 <td>47</td>390 <td>8</td>391 <td>91</td>392 <td>526</td>393 </tr>394 </tbody>395 </table>396 </body>397 </html>
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1662
14
1418
52
1311
25
1261
29
1234
24
Ist HTML für Anfänger leicht zu lernen?
Apr 07, 2025 am 12:11 AM
HTML ist für Anfänger geeignet, da es einfach und leicht zu lernen ist und schnell Ergebnisse sehen kann. 1) Die Lernkurve von HTML ist glatt und leicht zu beginnen. 2) Beherrschen Sie einfach die grundlegenden Tags, um Webseiten zu erstellen. 3) hohe Flexibilität und kann in Kombination mit CSS und JavaScript verwendet werden. 4) Reiche Lernressourcen und moderne Tools unterstützen den Lernprozess.
HTML, CSS und JavaScript verstehen: Ein Anfängerhandbuch
Apr 12, 2025 am 12:02 AM
WebdevelopmentRelieSonHtml, CSS und JavaScript: 1) HtmlStructuresContent, 2) CSSstylesit und 3) JavaScriptaddssinteraktivität, Bildung von TheBasisofModerernwebexperiences.
Die Rollen von HTML, CSS und JavaScript: Kernverantwortung
Apr 08, 2025 pm 07:05 PM
HTML definiert die Webstruktur, CSS ist für Stil und Layout verantwortlich, und JavaScript ergibt eine dynamische Interaktion. Die drei erfüllen ihre Aufgaben in der Webentwicklung und erstellen gemeinsam eine farbenfrohe Website.
HTML, CSS und JavaScript: Wesentliche Tools für Webentwickler
Apr 09, 2025 am 12:12 AM
HTML, CSS und JavaScript sind die drei Säulen der Webentwicklung. 1. HTML definiert die Webseitenstruktur und verwendet Tags wie z.
HTML: Die Struktur, CSS: Der Stil, JavaScript: Das Verhalten
Apr 18, 2025 am 12:09 AM
Die Rollen von HTML, CSS und JavaScript in der Webentwicklung sind: 1. HTML definiert die Webseitenstruktur, 2. CSS steuert den Webseitenstil, und 3. JavaScript fügt ein dynamisches Verhalten hinzu. Zusammen bauen sie den Rahmen, die Ästhetik und die Interaktivität moderner Websites auf.
Die Zukunft von HTML: Evolution und Trends im Webdesign
Apr 17, 2025 am 12:12 AM
Die Zukunft von HTML ist voller unendlicher Möglichkeiten. 1) Neue Funktionen und Standards umfassen mehr semantische Tags und die Beliebtheit von Webcomponenten. 2) Der Webdesign -Trend entwickelt sich weiterhin für reaktionsschnelles und zugängliches Design. 3) Die Leistungsoptimierung verbessert die Benutzererfahrung durch reaktionsschnelle Bildlade- und faulen Ladetechnologien.
HTML vs. CSS vs. JavaScript: Ein vergleichender Überblick
Apr 16, 2025 am 12:04 AM
Die Rollen von HTML, CSS und JavaScript in der Webentwicklung sind: HTML ist für die Inhaltsstruktur verantwortlich, CSS ist für den Stil verantwortlich und JavaScript ist für dynamisches Verhalten verantwortlich. 1. HTML definiert die Webseitenstruktur und den Inhalt durch Tags, um die Semantik zu gewährleisten. 2. CSS steuert den Webseitenstil über Selektoren und Attribute, um es schön und einfach zu lesen. 3. JavaScript steuert das Verhalten von Webseiten über Skripte, um dynamische und interaktive Funktionen zu erzielen.
Die Zukunft von HTML, CSS und JavaScript: Webentwicklungstrends
Apr 19, 2025 am 12:02 AM
Die zukünftigen Trends von HTML sind Semantik und Webkomponenten, die zukünftigen Trends von CSS sind CSS-in-JS und CssShudini, und die zukünftigen Trends von JavaScript sind WebAssembly und serverlos. 1. HTML -Semantik verbessern die Zugänglichkeits- und SEO -Effekte sowie Webkomponenten die Entwicklungseffizienz, aber der Browserkompatibilität sollte die Aufmerksamkeit geschenkt werden. 2. CSS-in-JS verbessert die Flexibilität des Stilmanagements, kann jedoch die Dateigröße erhöhen. CssShudini ermöglicht den direkten Betrieb des CSS -Renderings. 3.Webassembly optimiert die Browser -Anwendungsleistung, verfügt jedoch über eine steile Lernkurve, und serverloses vereinfacht die Entwicklung, erfordert jedoch eine Optimierung von Kaltstartproblemen.
