这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
下面小编就为大家带来一篇 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>
来源: http://www.phperz.com/article/17/0705/331217.html