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>
Masa Depan HTML, CSS, dan JavaScript: Trend Pembangunan WebApr 19, 2025 am 12:02 AMTrend masa depan HTML adalah semantik dan komponen web, trend masa depan CSS adalah CSS-in-JS dan CSShoudini, dan trend masa depan JavaScript adalah webassembly dan tanpa pelayan. 1. Semantik HTML meningkatkan kebolehcapaian dan kesan SEO, dan komponen web meningkatkan kecekapan pembangunan, tetapi perhatian harus dibayar kepada keserasian penyemak imbas. 2. CSS-in-JS meningkatkan fleksibiliti pengurusan gaya tetapi boleh meningkatkan saiz fail. Csshoudini membolehkan operasi langsung rendering CSS. 3.Webassembly mengoptimumkan prestasi aplikasi penyemak imbas tetapi mempunyai keluk pembelajaran yang curam, dan tanpa pelayan memudahkan pembangunan tetapi memerlukan pengoptimuman masalah permulaan sejuk.
HTML: Struktur, CSS: Gaya, JavaScript: Tingkah LakuApr 18, 2025 am 12:09 AMPeranan HTML, CSS dan JavaScript dalam pembangunan web adalah: 1. HTML mentakrifkan struktur laman web, 2. CSS mengawal gaya laman web, dan 3. JavaScript menambah tingkah laku dinamik. Bersama -sama, mereka membina kerangka, estetika dan interaktiviti laman web moden.
Masa Depan HTML: Evolusi dan Trend dalam Reka Bentuk WebApr 17, 2025 am 12:12 AMMasa depan HTML penuh dengan kemungkinan yang tidak terhingga. 1) Ciri -ciri dan piawaian baru akan merangkumi lebih banyak tag semantik dan populariti komponen web. 2) Trend reka bentuk web akan terus berkembang ke arah reka bentuk yang responsif dan boleh diakses. 3) Pengoptimuman prestasi akan meningkatkan pengalaman pengguna melalui pemuatan imej yang responsif dan teknologi pemuatan malas.
HTML vs CSS vs JavaScript: Gambaran Keseluruhan PerbandinganApr 16, 2025 am 12:04 AMPeranan HTML, CSS dan JavaScript dalam pembangunan web adalah: HTML bertanggungjawab untuk struktur kandungan, CSS bertanggungjawab untuk gaya, dan JavaScript bertanggungjawab untuk tingkah laku dinamik. 1. HTML mentakrifkan struktur laman web dan kandungan melalui tag untuk memastikan semantik. 2. CSS mengawal gaya laman web melalui pemilih dan atribut untuk menjadikannya cantik dan mudah dibaca. 3. JavaScript mengawal tingkah laku laman web melalui skrip untuk mencapai fungsi dinamik dan interaktif.
HTML: Adakah bahasa pengaturcaraan atau yang lain?Apr 15, 2025 am 12:13 AMHtmlisnotaprogramminglanguage; itisamarkuplanguage.1) htmlstructuresandformatswebcontentusingtags.2) itworkswithcssforstylingandjavascriptforinteractivity, meningkatkan pembangunan semula.
HTML: Membina struktur laman webApr 14, 2025 am 12:14 AMHTML adalah asas struktur laman web bangunan. 1. HTML mentakrifkan struktur kandungan dan semantik, dan penggunaan, dan sebagainya. 2. Menyediakan penanda semantik, seperti, dan sebagainya, untuk meningkatkan kesan SEO. 3. Untuk merealisasikan interaksi pengguna melalui tag, perhatikan pengesahan bentuk. 4. Gunakan elemen lanjutan seperti, digabungkan dengan JavaScript untuk mencapai kesan dinamik. 5. Kesilapan biasa termasuk label yang tidak terkawal dan nilai atribut yang tidak disebutkan, dan alat pengesahan diperlukan. 6. Strategi pengoptimuman termasuk mengurangkan permintaan HTTP, memampatkan HTML, menggunakan tag semantik, dll.
Dari teks ke laman web: Kekuatan HTMLApr 13, 2025 am 12:07 AMHTML adalah bahasa yang digunakan untuk membina laman web, menentukan struktur laman web dan kandungan melalui tag dan atribut. 1) HTML menganjurkan struktur dokumen melalui tag, seperti,. 2) Penyemak imbas menghancurkan HTML untuk membina DOM dan menjadikan laman web. 3) Ciri -ciri baru HTML5, seperti, meningkatkan fungsi multimedia. 4) Kesilapan biasa termasuk label yang tidak terkawal dan nilai atribut yang tidak disebutkan. 5) Cadangan pengoptimuman termasuk menggunakan tag semantik dan mengurangkan saiz fail.
Memahami HTML, CSS, dan JavaScript: Panduan PemulaApr 12, 2025 am 12:02 AMWebDevelopmentReliesOnhtml, CSS, andjavascript: 1) HtmlStructuresContent, 2) CSSStylesit, dan3) JavaScriptaddsInteractivity, Formingthebasisofmodernwebexperiences.
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
MinGW - GNU Minimalis untuk Windows
Projek ini dalam proses untuk dipindahkan ke osdn.net/projects/mingw, anda boleh terus mengikuti kami di sana. MinGW: Port Windows asli bagi GNU Compiler Collection (GCC), perpustakaan import yang boleh diedarkan secara bebas dan fail pengepala untuk membina aplikasi Windows asli termasuk sambungan kepada masa jalan MSVC untuk menyokong fungsi C99. Semua perisian MinGW boleh dijalankan pada platform Windows 64-bit.
Dreamweaver CS6
Alat pembangunan web visual
mPDF
mPDF ialah perpustakaan PHP yang boleh menjana fail PDF daripada HTML yang dikodkan UTF-8. Pengarang asal, Ian Back, menulis mPDF untuk mengeluarkan fail PDF "dengan cepat" dari tapak webnya dan mengendalikan bahasa yang berbeza. Ia lebih perlahan dan menghasilkan fail yang lebih besar apabila menggunakan fon Unicode daripada skrip asal seperti HTML2FPDF, tetapi menyokong gaya CSS dsb. dan mempunyai banyak peningkatan. Menyokong hampir semua bahasa, termasuk RTL (Arab dan Ibrani) dan CJK (Cina, Jepun dan Korea). Menyokong elemen peringkat blok bersarang (seperti P, DIV),
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
