jQueryではScrollableGridPluginについて.js(固定ヘッダ)プラグインの使用段階解析

このプログラムはjsはネット上で見つけた固定ヘッダー効果のあるプラグインで、灰色で使いやすく、効果もよく見えます.しかし、结局はオーダーメイドではありませんので、あるところは自分のプロジェクトの中で少し変更しなければなりません.本当にこのプラグインが大好きなので、初めて中に入って、原作者の考え方と書き方を見て、それからどのように自分のプロジェクトに合うかを知ることができます.
jsに対して私は完全に1人のとてもアマチュアの选手で、以下は自分の现状によってこのプラグインに対して分析をして、どうせ自分は何が起こったのかを理解して、分析が间违っていることがあって、また达人に指导してもらいます.

/*!
* This plug-in is developed for ASP.Net GridView control to make the GridView scrollable with Fixed headers.
*/
(function ($) {
  $.fn.Scrollable = function (options) {//1、    jQuery    ，             
    var defaults = {
      ScrollHeight: 300,
      Width: 0
    };
    var options = $.extend(defaults, options); //2、    ，        ScrollHeight  ，     300   ，    ，     ScrollHeight 
    return this.each(function () {
      var grid = $(this).get(0);//3、    gridview     
      var gridWidth = grid.offsetWidth;//4、  gridview   
      var headerCellWidths = new Array();
      for (var i = 0; i < grid.getElementsByTagName("TH").length; i++) {
        headerCellWidths[i] = grid.getElementsByTagName("TH")[i].offsetWidth;
      }//5、                    
      grid.parentNode.appendChild(document.createElement("div"));//6、    gridview          div  
      var parentDiv = grid.parentNode;//7、gridview    ，  div

      var table = document.createElement("table");//8、 dom     table  
      for (i = 0; i < grid.attributes.length; i++) {
        if (grid.attributes[i].specified && grid.attributes[i].name != "id") {
          table.setAttribute(grid.attributes[i].name, grid.attributes[i].value);
        }
      }//9、 gridview           table   
      table.style.cssText = grid.style.cssText;//10、      table   
      table.style.width = gridWidth + "px";//11、 table     gridview    
      table.appendChild(document.createElement("tbody"));//12、 table     tbody  
      table.getElementsByTagName("tbody")[0].appendChild(grid.getElementsByTagName("TR")[0]);//13、 gridview         tbody   ， table       gridview     ，   gridview            
      var cells = table.getElementsByTagName("TH");//14、          

      var gridRow = grid.getElementsByTagName("TR")[0];//15、gridview          
      for (var i = 0; i < cells.length; i++) {
        var width;
        if (headerCellWidths[i] > gridRow.getElementsByTagName("TD")[i].offsetWidth) {//16、                
          width = headerCellWidths[i];
        }
        else {//17、                
          width = gridRow.getElementsByTagName("TD")[i].offsetWidth;
        }
        cells[i].style.width = parseInt(width - 3) + "px";
        gridRow.getElementsByTagName("TD")[i].style.width = parseInt(width - 3) + "px";//18、                         ，-3               ，    
      }
      parentDiv.removeChild(grid);//19、  gridview  （           ，        ，  27 ），      table       

      var dummyHeader = document.createElement("div");//20、         div  
      dummyHeader.appendChild(table);//21、   table    
      parentDiv.appendChild(dummyHeader);//22、   div     gridview    
      if (options.Width > 0) {//23、                   ，  gridWidth     
        gridWidth = options.Width;
      }
      var scrollableDiv = document.createElement("div");//24、     div
      gridWidth = parseInt(gridWidth) + 17;//25、     +17             table，         ，             ，              ，         ，17        ，        。
      scrollableDiv.style.cssText = "overflow:auto;height:" + options.ScrollHeight + "px;width:" + gridWidth + "px";//26、       div    ，height                   
      scrollableDiv.appendChild(grid);//27、 gridview（            ）          div ，        grid  
      parentDiv.appendChild(scrollableDiv);//28、       div  table   
    });
  };
})(jQuery);

プラグインの内部がどうなっているのかを理解してこそ、どのように修正するかを知ることができます.
実はここにはまだよく分からないところがありますが、baiduの後も分からなかったので、理解してほしい友达に教えてもらいたいです.13と15の2つの場所でgridを使っています.getElementsByTagName("TR")[0]);この文は、表面的には同じtrが得られるのではないでしょうか.しかし、ブラウザで追跡したところ、13で呼び出されたのはgridの最初のtrであり、th列を含むタイトルtrであり、15でもgridの最初のtrであるが、td列の最初のデータ列trが含まれていることが分かった.
怪就怪は13を実行した後、gridのtr数が1少なくなり、th列を含むtrが少なくなった.appendChildメソッドは、コピーエレメントではなく転送エレメントを挿入する方法だと思いますが、このメソッドを調べることで、私が考えているようなことは明確に説明されていません.私は少し愚かになった.
このプラグインの呼び出し方法は以下の通りで、興味のある方は使ってみて、本当にいい感じです.

  
  
    jQuery(document).ready(function () {
      jQuery("#<%=gv_bugList.ClientID %>").Scrollable({
        ScrollHeight: 400,
        width: 500
      });
    })