DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> js實現html table 行,列鎖定的簡單實例
js實現html table 行,列鎖定的簡單實例
編輯：關於JavaScript     

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 行,列鎖定的簡單實例全部內容了，希望大家多多支持~

關於JavaScript
JS定時刷新頁面及跳轉頁面的方法教程
Javascript 返回上一頁1. Javascript 返回上一頁 history.go(-1)
純JS實現旋轉圖片3D展示效果
CSS:<style type=text/css>#show{position:rela
js 截取或者替換字符串中的數字實現方法
在js操作表格時，我們經常會需要得到或者修改name中的下標，如：name=cust[1]/cust

相關文章

JavaScript基礎知識JSON基礎正則表達式關於JavaScriptJavaScript技巧jQuery入門知識AJAX入門JavaScript綜合知識
小編推薦
輕松創建nodejs服務器（10）：處理上傳圖片 javascript伸縮型菜單實現代碼 javascript檢測flash插件是否被禁用的方法 JavaScript中合並數組的N種方法 延遲事件為0的setTimeout的真正目的 HTML顏色選擇器實現代碼 JS常用函數使用指南 js網頁右下角提示框實例 Javascript校驗含中文的字符串長度 在JavaScript應用中使用RequireJS來實現延遲加載
熱門推薦
JavaScript將base64圖片轉換成formData並通過AJAX提交的實現方法 javascript實現禁止復制網頁內容匯總 Bootstrap每天必學之折疊 JS輸入用戶名自動顯示郵箱後綴列表的方法 JavaScript 基本概念 網頁裡做異步的跨域請求 js實現的美女瀑布流效果代碼 自己實現string的substring方法 人民幣小寫轉大寫，數字反轉，正則優化 js超時調用setTimeout和間歇調用setInterval實例教程分析
大家都在看
HTML和CSS做網頁實例教程:模擬表格對角線 CSS中margin常見問題解決方案 html5實現進度條功能效果 ajax 不錯的應用 js判斷FCKeditor內容是否為空的兩種形式 Mashups+AJAX打造全新Web開發 使用原生js來操作對象dom的class屬性 設計觀點 技術是設計能力的重要資本
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved