你的位置:首页 > 网页设计

[网页设计][转] js实现html table 行,列锁定


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 ="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 _mce_>129                    姓名130                  </th>131                  <th _mce_>132                    班级133                  </th>134                  <th _mce_>135                    语文136                  </th>137                  <th _mce_>138                    数学139                  </th>140                  <th _mce_>141                    英语142                  </th>143                  <th _mce_>144                    政治145                  </th>146                  <th _mce_>147                    历史148                  </th>149                  <th _mce_>150                    地理151                  </th>152                  <th _mce_>153                    物理154                  </th>155                  <th _mce_>156                    化学157                  </th>158                  <th _mce_>159                    生物160                  </th>161                  <th _mce_>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>

View Code