JQuery about the use of the scrollablegridplugin.js (fixed header) plug in step by step

Scrollablegridplugin.js is a plugin with a fixed header effect found on the web. However, after all is not tailored, so some places in their own project or to make a little bit of small changes, because I really like the plug-in, so the first time into the inside, to see the original author's ideas and writing, and then know how to change to suit their own project.

Js I am completely a very amateur player, the following according to their own status quo of the plug-in to do the analysis, anyway, they are to understand what is going on, there is wrong analysis, please master advice.

(function ($) {
  $.fn.Scrollable = function (options) {//1. Define a jQuery instance method, which is also the entry point to call the plug-in
    var defaults = {
      ScrollHeight: 300,
      Width: 0
    };
    var options = $.extend(defaults, options); //2. Expand the collection to use the value 300 by default if the value of ScrollHeight is not passed in from the outside, and if passed in, the value of ScrollHeight is passed in
    return this.each(function () {
      var grid = $(this).get(0);//3. Gets the object of the current gridview control
      var gridWidth = grid.offsetWidth;//4. Get the width of the gridview
      var headerCellWidths = new Array();
      for (var i = 0; i < grid.getElementsByTagName("TH").length; i++) {
        headerCellWidths[i] = grid.getElementsByTagName("TH")[i].offsetWidth;
      }//5. Creates an array that stores the widths of the header columns
      grid.parentNode.appendChild(document.createElement("div"));//6. Add a div element at the end of the sibling of the gridview in the document
      var parentDiv = grid.parentNode;//7. The parent of the gridview is a div

      var table = document.createElement("table");//8. Create a table element in the dom
      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. Add all the properties of the gridview to the newly created table element
      table.style.cssText = grid.style.cssText;//Add the style to the table element as well
      table.style.width = gridWidth + "px";//11. Set the width of the table element to be the same as the gridview
      table.appendChild(document.createElement("tbody"));//12. Add a tbody element to the table element
      table.getElementsByTagName("tbody")[0].appendChild(grid.getElementsByTagName("TR")[0]);//13. Add the first row of data from the gridview to the tbody element, that is, the title element of the gridview is now stored in the table, and the title element is deleted from the gridview
      var cells = table.getElementsByTagName("TH");//Gets a collection of table header columns

      var gridRow = grid.getElementsByTagName("TR")[0];//15. Collection of the first row of data columns in the gridview
      for (var i = 0; i < cells.length; i++) {
        var width;
        if (headerCellWidths[i] > gridRow.getElementsByTagName("TD")[i].offsetWidth) {//16. If the width of the header is greater than the width of the data column
          width = headerCellWidths[i];
        }
        else {//17. If the width of the header is less than the width of the data column
          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. Adjust the width of each heading column and data column to the wider one. -3 is for the purpose of fine-tuning the style of the table, not necessarily
      }
      parentDiv.removeChild(grid);//19. Delete the gridview control (note that it is only removed from the document stream, it is still in memory, note 27), and now there is only one header in the table

      var dummyHeader = document.createElement("div");//20. Create another div element in the document
      dummyHeader.appendChild(table);//21. Add the table to it
      parentDiv.appendChild(dummyHeader);//22. Insert the div into the location of the original gridview
      if (options.Width > 0) {//23. If we initially pass in a desired table width value, we assign the gridWidth to that value
        gridWidth = options.Width;
      }
      var scrollableDiv = document.createElement("div");//24. Create another div
      gridWidth = parseInt(gridWidth) + 17;//25, on the original basis +17 is because this is a table with a slider, when the slider appears, will be in the width of the width of an extra bar, in order to make the data column and the title column to keep consistent, to calculate the width, the value of 17 is not necessary, this can be tested.
      scrollableDiv.style.cssText = "overflow:auto;height:" + options.ScrollHeight + "px;width:" + gridWidth + "px";//Height is how long we want it to have a scroll bar
      scrollableDiv.appendChild(grid);//27. Add the gridview (currently only the data exists in the data column) to the div with the scroll bar and pull the grid out of memory
      parentDiv.appendChild(scrollableDiv);//28. Add the div with the scroll bar to the bottom of the table
    });
  };
})(jQuery);

Only by understanding what's going on inside the plug-in can you know how to change it.

After executing 13, the tr number in the grid is 1 less, that is, the tr with th column is missing. I thought the appendChild method was passing an element to insert, not copying an element to insert, but by checking this method it wasn't as clear as I thought. I was a little confused.

This plug-in call method as follows, interested friends can try to use, feel really good.

  <script type="text/javascript" src="../Scripts/PlugIn/ScrollableGridPlugin.js"></script>
  <script type="text/javascript">
    jQuery(document).ready(function () {
      jQuery("#<%=gv_bugList.ClientID %>").Scrollable({
        ScrollHeight: 400,
        width: 500
      });
    })
  </script>