js实现html table 行,列锁定的简单实例

js实现html table 表头，指定列锁定
实现效果如下：
感兴趣的朋友可以直接复制出来运行看效果。
<！DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>new document</title><script type="text/javascript"src="http://code.jquery.com/jquery-1.6.1.min.js"></script><script type="text/javascript">function FixTable（TableID, FixColumnNumber, width, height） {/// <summary>/// 锁定表头和列/// <para> sorex.cnblogs.com </para>/// </summary>/// <param name="TableID" type="String">/// 要锁定的Table的ID/// </param>/// <param name="FixColumnNumber" type="Number">/// 要锁定列的个数/// </param>/// <param name="width" type="Number">/// 显示的宽度/// </param>/// <param name="height" type="Number">/// 显示的高度/// </param>if （$（"#" + TableID + "_tableLayout"）.length ！= 0） {$（"#" + TableID + "_tableLayout"）.before（$（"#" + TableID））;$（"#" + TableID + "_tableLayout"）.empty（）;}else {$（"#" + TableID）.after（"<div id="" + TableID + "_tableLayout" style="overflow:hidden;height:" + height + "px; width:" + width + "px;"></div>"）;}$（"<div id="" + TableID + "_tableFix"></div>"+ "<div id="" + TableID + "_tableHead"></div>"+ "<div id="" + TableID + "_tableColumn"></div>"+ "<div id="" + TableID + "_tableData"></div>"）.appendTo（"#" + TableID + "_tableLayout"）;var oldtable = $（"#" + TableID）;var tableFixClone = oldtable.clone（true）;tableFixClone.attr（"id", TableID + "_tableFixClone"）;$（"#" + TableID + "_tableFix"）.append（tableFixClone）;var tableHeadClone = oldtable.clone（true）;tableHeadClone.attr（"id", TableID + "_tableHeadClone"）;$（"#" + TableID + "_tableHead"）.append（tableHeadClone）;var tableColumnClone = oldtable.clone（true）;tableColumnClone.attr（"id", TableID + "_tableColumnClone"）;$（"#" + TableID + "_tableColumn"）.append（tableColumnClone）;$（"#" + TableID + "_tableData"）.append（oldtable）;$（"#" + TableID + "_tableLayout table"）.each（function （） {$（this）.css（"margin", "0"）;}）;var HeadHeight = $（"#" + TableID + "_tableHead thead"）.height（）;HeadHeight += 2;$（"#" + TableID + "_tableHead"）.css（"height", HeadHeight）;$（"#" + TableID + "_tableFix"）.css（"height", HeadHeight）;var ColumnsWidth = 0;var ColumnsNumber = 0;$（"#" + TableID + "_tableColumn tr:last td:lt（" + FixColumnNumber + "）"）.each（function （） {ColumnsWidth += $（this）.outerWidth（true）;ColumnsNumber++;}）;ColumnsWidth += 2;if （$.browser.msie） {switch （$.browser.version） {case "7.0":if （ColumnsNumber >= 3） ColumnsWidth--;break;case "8.0":if （ColumnsNumber >= 2） ColumnsWidth--;break;}}$（"#" + TableID + "_tableColumn"）.css（"width", ColumnsWidth）;$（"#" + TableID + "_tableFix"）.css（"width", ColumnsWidth）;$（"#" + TableID + "_tableData"）.scroll（function （） {$（"#" + TableID + "_tableHead"）.scrollLeft（$（"#" + TableID + "_tableData"）.scrollLeft（））;$（"#" + TableID + "_tableColumn"）.scrollTop（$（"#" + TableID + "_tableData"）.scrollTop（））;}）;$（"#" + TableID + "_tableFix"）.css（{ "overflow": "hidden", "position": "relative", "z-index": "50", "background-color": "Silver" }）;$（"#" + TableID + "_tableHead"）.css（{ "overflow": "hidden", "width": width - 17, "position": "relative", "z-index": "45", "background-color": "Silver" }）;$（"#" + TableID + "_tableColumn"）.css（{ "overflow": "hidden", "height": height - 17, "position": "relative", "z-index": "40", "background-color": "Silver" }）;$（"#" + TableID + "_tableData"）.css（{ "overflow": "scroll", "width": width, "height": height, "position": "relative", "z-index": "35" }）;if （$（"#" + TableID + "_tableHead"）.width（） > $（"#" + TableID + "_tableFix table"）.width（）） {$（"#" + TableID + "_tableHead"）.css（"width", $（"#" + TableID + "_tableFix table"）.width（））;$（"#" + TableID + "_tableData"）.css（"width", $（"#" + TableID + "_tableFix table"）.width（） + 17）;}if （$（"#" + TableID + "_tableColumn"）.height（） > $（"#" + TableID + "_tableColumn table"）.height（）） {$（"#" + TableID + "_tableColumn"）.css（"height", $（"#" + TableID + "_tableColumn table"）.height（））;$（"#" + TableID + "_tableData"）.css（"height", $（"#" + TableID + "_tableColumn table"）.height（） + 17）;}$（"#" + TableID + "_tableFix"）.offset（$（"#" + TableID + "_tableLayout"）.offset（））;$（"#" + TableID + "_tableHead"）.offset（$（"#" + TableID + "_tableLayout"）.offset（））;$（"#" + TableID + "_tableColumn"）.offset（$（"#" + TableID + "_tableLayout"）.offset（））;$（"#" + TableID + "_tableData"）.offset（$（"#" + TableID + "_tableLayout"）.offset（））;}$（document）.ready（function （） {FixTable（"MyTable", 1, 600, 400）;}）;</script></head><body><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"id="MyTable" border="1" cellspacing="0" cellpadding="0"><thead><tr><th style="text-align: center; width: 80px" rowspan="3">姓名</th><th style="text-align: center; width: 80px" rowspan="3">班级</th><th style="text-align: center" colspan="10">成绩</th></tr><tr><th style="text-align: center" colspan="3">主科</th><th style="text-align: center" colspan="3">文科</th><th style="text-align: center" colspan="3">理科</th><th style="text-align: center; width: 80px" rowspan="2">总分</th></tr><tr><th style="text-align: center; width: 80px">语文</th><th style="text-align: center; width: 80px">数学</th><th style="text-align: center; width: 80px">英语</th><th style="text-align: center; width: 80px">政治</th><th style="text-align: center; width: 80px">历史</th><th style="text-align: center; width: 80px">地理</th><th style="text-align: center; width: 80px">物理</th><th style="text-align: center; width: 80px">化学</th><th style="text-align: center; width: 80px">生物</th></tr><！-- <tr> <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;"> 姓名 </th> <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;"> 班级 </th> <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;"> 语文 </th> <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;"> 数学 </th> <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;"> 英语 </th> <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;"> 政治 </th> <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;"> 历史 </th> <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;"> 地理 </th> <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;"> 物理 </th> <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;"> 化学 </th> <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;"> 生物 </th> <th style="width: 80px; text-align: center;" _mce_style="width: 80px; text-align: center;"> 总分 </th> </tr> --></thead><tbody><！-- 数据行 --><tr><td>学生32</td><td>班级1</td><td>29</td><td>25</td><td>146</td><td>28</td><td>79</td><td>73</td><td>47</td><td>8</td><td>91</td><td>526</td></tr><tr><td>学生32</td><td>班级1</td><td>29</td><td>25</td><td>146</td><td>28</td><td>79</td><td>73</td><td>47</td><td>8</td><td>91</td><td>526</td></tr><tr><td>学生32</td><td>班级1</td><td>29</td><td>25</td><td>146</td><td>28</td><td>79</td><td>73</td><td>47</td><td>8</td><td>91</td><td>526</td></tr><tr><td>学生32</td><td>班级1</td><td>29</td><td>25</td><td>146</td><td>28</td><td>79</td><td>73</td><td>47</td><td>8</td><td>91</td><td>526</td></tr><tr><td>学生32</td><td>班级1</td><td>29</td><td>25</td><td>146</td><td>28</td><td>79</td><td>73</td><td>47</td><td>8</td><td>91</td><td>526</td></tr><tr><td>学生32</td><td>班级1</td><td>29</td><td>25</td><td>146</td><td>28</td><td>79</td><td>73</td><td>47</td><td>8</td><td>91</td><td>526</td></tr><tr><td>学生32</td><td>班级1</td><td>29</td><td>25</td><td>146</td><td>28</td><td>79</td><td>73</td><td>47</td><td>8</td><td>91</td><td>526</td></tr><tr><td>学生32</td><td>班级1</td><td>29</td><td>25</td><td>146</td><td>28</td><td>79</td><td>73</td><td>47</td><td>8</td><td>91</td><td>526</td></tr><tr><td>学生32</td><td>班级1</td><td>29</td><td>25</td><td>146</td><td>28</td><td>79</td><td>73</td><td>47</td><td>8</td><td>91</td><td>526</td></tr><tr><td>学生32</td><td>班级1</td><td>29</td><td>25</td><td>146</td><td>28</td><td>79</td><td>73</td><td>47</td><td>8</td><td>91</td><td>526</td></tr><tr><td>学生32</td><td>班级1</td><td>29</td><td>25</td><td>146</td><td>28</td><td>79</td><td>73</td><td>47</td><td>8</td><td>91</td><td>526</td></tr><tr><td>学生32</td><td>班级1</td><td>29</td><td>25</td><td>146</td><td>28</td><td>79</td><td>73</td><td>47</td><td>8</td><td>91</td><td>526</td></tr><tr><td>学生32</td><td>班级1</td><td>29</td><td>25</td><td>146</td><td>28</td><td>79</td><td>73</td><td>47</td><td>8</td><td>91</td><td>526</td></tr><tr><td>学生32</td><td>班级1</td><td>29</td><td>25</td><td>146</td><td>28</td><td>79</td><td>73</td><td>47</td><td>8</td><td>91</td><td>526</td></tr><tr><td>学生32</td><td>班级1</td><td>29</td><td>25</td><td>146</td><td>28</td><td>79</td><td>73</td><td>47</td><td>8</td><td>91</td><td>526</td></tr><tr><td>学生32</td><td>班级1</td><td>29</td><td>25</td><td>146</td><td>28</td><td>79</td><td>73</td><td>47</td><td>8</td><td>91</td><td>526</td></tr></tbody></table></body></html>
以上就是小编为大家带来的js实现html table 行,列锁定的简单实例全部内容了，希望大家多多支持脚本之家~