Table Fixed Header - JS v0.1

by rajeshpillai

HTML

<table id="tbl" border="1" >
 <thead>
  <tr>

  <th>srno</th>
  <th>Name</th>
  </tr>
  </thead>
  <tbody>
    <tr><td>1</td>
        <td>Joyeta</td>

    </tr>
    <tr><td>1</td>
        <td>Joyeta</td>
    </tr>
    <tr><td>1</td>
        <td>Joyeta</td>
    </tr>

    <tr><td>1</td>
        <td>Joyeta</td>
    </tr>
    <tr><td>1</td>
        <td>Joyeta</td>
    </tr>
    <tr><td>1</td>

        <td>Joyeta</td>
    </tr>
    <tr><td>1</td>
        <td>Joyeta</td>
    </tr>
    <tr><td>1</td>
        <td>Joyeta</td>

    </tr>
    
  </tbody>
 </table>

JavaScript

//Returns true if it is a DOM node


function isNode(o) {
    return (
    typeof Node === "object" ? o instanceof Node : typeof o === "object" && typeof o.nodeType === "number" && typeof o.nodeName === "string");
}

//Returns true if it is a DOM element    
function isElement(o) {
    return (
    typeof HTMLElement === "object" ? o instanceof HTMLElement : //DOM2
    typeof o === "object" && o.nodeType === 1 && typeof o.nodeName === "string");
}

function table(element, width, height) {
    if (!isElement(element)) {
        element = document.getElementById(element);
    }

    var parent = element.parentNode;

    var thead = element.getElementsByTagName("thead");
    var clone = thead[0];

    var tbody = element.getElementsByTagName("tbody");

    var div = document.createElement("div");
    div.setAttribute("class", "table-header");

    //parent.appendChild(div);
    parent.insertBefore(div, element);


    tbl = document.createElement("table");
    tbl.setAttribute("border", "1");
    tbl.setAttribute("id", "hid");
    tbl.setAttribute("style", "background-color:lime;overflow:auto;" + "width:" + (width - 15) + "px");

    tbl.appendChild(clone);

    div.appendChild(tbl);

    var divChild = document.createElement("div");
    divChild.setAttribute("class", "table-body");
    divChild.setAttribute("style", "overflow:auto;height:" + height + 'px' + ";width:" + width + 'px');
    parent.insertBefore(divChild, element);
    divChild.appendChild(element);

    sizeHeader(tbl, element);
}


function sizeHeader(tblheader, tblbody) {
    var headerTable = tblheader;
    var itemsTable = tblbody;
    var firstHeaderRow = headerTable.rows[0];
    var firstItemsRow = itemsTable.rows[0];
    var colsNum = firstItemsRow.cells.length;
    for (var i = 0; i < colsNum; i++) {
        var cellWidth = firstItemsRow.cells[i].offsetWidth;
        firstHeaderRow.cells[i].style.width = cellWidth + "px";
    }
    var rowsNum = firstHeaderRow.cells.length;
    for (var i = 0;...