Click here to Skip to main content
15,034,598 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Hi i am trying to add a new row to the GridView using javascript or jquery. I am not using code behind code as i do not want the page to get refreshed so i am trying in javascript. I have tried the following code and it did add a new row.. but the new row is a clone or copy of first row... wich i do not want... means i need same kind of row when i click on add new row but the id of that row inside grid view should be different which is not happening as i am doing clone... and code is used was.. :

function AddNewRecord()
    var grd = document.getElementById('ctl00_ContentPlaceHolder1_griddetails');
    var tbod=grd.rows[0].parentNode;
    var newRow=grd.rows[grd.rows.length - 1].cloneNode(true);

on the button click i am calling this js function but since it has clone node it is just copying same id to next row in gridview which i do not need... so can u please help me as to how can i modify this code to create new row with details as of first but with new id...

Thanking u in advance!

There is no grid view on the client side, only a table. So create a new tr/td/whatever string of HTML and append it to the table.
Shruthi.BT 28-Dec-12 2:34am
i tried appending new row and column values as u suggested but one problem is that the id .... actually inside gridview i am binding 2 dropdownlist and the dropdownlist id is very important as i am adding new row that id is taking what i give in id of appending new row... but i want it the way like for ex: my first row in grid view has 2 drop down and first dropdown has id as
but in new row i want the id of the drop down as

means the id no should increment like how it gets incremented if we do from codebehind adding new row... how this can be done...??
Christian Graus 28-Dec-12 2:44am
You need to write code to generate the id and insert it. But I don't expect that viewstate is going to find it if you ever post back, so why does it matter ?
<!-- There is no grid view on the client side, only a table. So create a new tr/td/whatever string of HTML and append it to the table. try this... -->

<script type="text/javascript">
        function addRow()
            var tr = document.createElement("tr");

            for(var c = 0; c < tbl.rows[0].childNodes.length; c++)
                var td = document.createElement("td");
                td.innerText = "Column " + c;

       = "lightgrey";
                td.onmouseover = function()
           = "lightyellow";
                td.onmouseout = function()
           = "lightgrey";
                td.onclick = function()

      <table id="tbl" width="60%" border="1">
      <input type="button" onclick="addRow();" value="Add Row" />

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