Rumah >hujung hadapan web >html tutorial >[转] js实现html table 行，列锁定_html/css_WEB-ITnose
[转] js实现html table 行，列锁定_html/css_WEB-ITnose
- WBOYasal
- 2016-06-24 11:45:111073semak imbas
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>
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：CSS那些事读书笔记1_html/css_WEB-ITnoseArtikel seterusnya：HTML基础知识总结（一）_html/css_WEB-ITnose