how to create a dynamic table with header

See more:

Javascript

hi friends

i am trying to create table dynamically with header .. i have achieved it but its not working IE , and working in all other browser when click addrow button itwill add one row but the table header is going down u can see here [^]
my code is

function addRow1(tableId, divId) {
    debugger;
    var id = document.getElementById('SubCategoryId' + divId).value;
    var dealModels = $("#" + id).val();

    var dealVar = dealModels.split(',');
    document.getElementById('hdnListCount').value = dealVar.length;
    var table = document.getElementById(tableId);
    var listCount = document.getElementById('hdnListCount').value;
    var rowCount = table.rows.length;
    var colsCount = 2;
    if (rowCount <= listCount) {

        var row = table.insertRow(rowCount);
        document.getElementById('RowCount' + tableId).value = ((rowCount - 1) + 1);

        // Column'1
        var cell1 = row.insertCell(0);

        var ddlId = tableId + "ddlVarNames" + ((rowCount - 1) + 1);
        var element1 = document.createElement('select');
        element1.setAttribute('id', ddlId);

        for (var i = 0; i <= dealVar.length; i++) {

            if (dealVar[i] != null &&dealVar[i].indexOf("key")>=0) {
                var option = document.createElement('option');
                var str = dealVar[i].split(';');
                var str1 = str[0].split(':');
                var str2 = str[1].split(':');

                option.setAttribute('value', str1[1]);

                option.appendChild(document.createTextNode(str2[1]));
                element1.appendChild(option);
            }
        }
        cell1.appendChild(element1);

        //Column'2
        var cell2 = row.insertCell(1);
        var element2 = document.createElement('input');
        element2.setAttribute('name', 'hidden');
        element2.type = "text";
        element2.disabled = "disabled";
        cell2.appendChild(element2);
        // Column last
        var cell3 = row.insertCell(2);
        var btnId = "btnDelete" + ((rowCount - 1) + 1);
        var element3 = document.createElement("input");
        element3.setAttribute('id', btnId);
        element3.type = "button";
        element3.setAttribute('value', 'Delete');
        element3.onclick = function () { removeRow1(btnId, tableId); };
        cell3.appendChild(element3);


    } else {
        alert('You can add ' + listCount + ' rows only!');


    }
}

the table header should remain as header