Click here to Skip to main content
14,872,784 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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
JavaScript
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
Posted
Updated 8-Dec-14 22:21pm
v6

1 solution

Hi,

you can overcome this with the gridview control.

try the below link.

Dynamically adding and deleting rows from ASP.NET GridView[^]
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900