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>
So beheben Sie einen DNS-Fehler
So stellen Sie Daten nach der Formatierung wieder her
Können aufgeladene Telefonrechnungen von Douyin erstattet werden?
Was sind die Unterschiede zwischen Hibernate und Mybatis?
Verhindern Sie die Verwendung von default()
Warum kann ich nicht auf den Ethereum-Browser zugreifen?
Was bedeutet STO in der Blockchain?
So verwenden Sie das Anhängen in Python
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
