Click here to Skip to main content
15,667,010 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hey Can AnyOne Tell Me That How To Copy Table Row With Inclue All Asp.Net Controls Having Values And Paste That Row Below Of Copied Row ???
Mohan Gopi 29-Aug-13 6:01am    
Hi Mithiten, your question is not clear exactly what you want. you want copy the DataTable Rows and Paste in the same DataTable?

Hello, assumed that you need to copy a html table row along with the controls(elements) inside it.

the same functionality is posted here..[^]

check once..
Share this answer
Mithiten 29-Aug-13 6:35am    
Hey But I want To append That Copy Row Not At Last But After That Copied Row....Any Idea ???
Mithiten 29-Aug-13 6:45am    
Hey I Don't Want To Copy Only Last Row But Ant Of Table Row I Want To Copy.....
vinay.tatipamula 29-Aug-13 6:49am    
i got your point.. wait for the answer.. it may take some time..
Mithiten 29-Aug-13 6:56am    
its problem take your Time...
vinay.tatipamula 29-Aug-13 7:40am    
Hi... check the answer posted by me below. or navigate to this..
Hi.. check the solution here.[^]
Share this answer
enhzflep 29-Aug-13 8:06am    
Nice example. Took me quite a while to figure out that you need to right-click a row to get the context menu.
I can't help but wonder which one of us has miss-interpreted the following:

"Hey But I want To append That Copy Row ***Not At Last But After That Copied Row***" (emphasis added)
Mithiten 29-Aug-13 8:11am    
Hey VinayT.Orbees its Nice But I want that Copied Row Not Last....Below That Row
vinay.tatipamula 29-Aug-13 8:22am    
thanks.. ya that is context menu, i forgot to communicate to you.. just updated the code according to you and placed here..
Mithiten 29-Aug-13 8:52am    
Its Okey...:-)
Here's some code that will achieve what I think you want.
The drawback is that attached events are not also attached to the dupliacate row. That is to say, clicking a row will duplicate it and add a copy below the clicked row. Unfortunately, you'll have to manually attach the onclick handler in order to be able to copy a copy. (I dont know) Perhaps there's a way of iterating through the handlers of an object in order to copy them to another.

Of course, this may not be needed. As a guess, elements with inline handlers would work ok.


I imagine that the following would duplicate just fine
<button  önclick="doSomethingFunc();">Do Something</button>

While an approach that attaches the handlers programatically appears not to duplicate the handlers.
<button id="doSomethingBtn">Do Something</button>

document.getElementById('doSomethingBtn').addEventListener(click, doSomethingFunc, false);

<!DOCTYPE html>
function byId(e){return document.getElementById(e);}
function newEl(tag){return document.createElement(tag);}
function newTxt(txt){return document.createTextNode(txt);}
function toggleClass(element, newStr)
    if ( index == -1)
        element.className += ' '+newStr;
        if (index != 0)
            newStr = ' '+newStr;
        element.className = element.className.replace(newStr, '');
function forEachNode(nodeList, func)
    var i, n = nodeList.length;
    for (i=0; i<n; i++)
        func(nodeList[i], i, nodeList);

window.addEventListener('load', mInit, false);

function makeTable(nCols, nRows, idTxt)
    var x, y, curRow, curCell, tbl = newEl('table');
    tbl.setAttribute('id', idTxt);
    for (y=0; y<nRows; y++)
        curRow = tbl.insertRow();
        curRow.addEventListener('click', onRowClick, false);
        for (x=0; x<nCols; x++)
            curCell = curRow.insertCell();
            curCell.innerHTML = "Cell: " + (nCols-x) + "," + (nRows-y);
    return tbl;

function insertAfter(node, reference)
    // If the reference node has a nextSibling, insert
    // the node before that
    if (reference.nextSibling)
    // If the reference node is the last child, just
    // append the node to the parent

    else {
    return node;

function onRowClick(e)
    var curRow = this;
    var duplicatedRow = curRow.cloneNode(true);

    duplicatedRow.cells[0].innerHTML = duplicatedRow.cells[0].innerHTML + "(copied)";
    insertAfter(duplicatedRow, curRow);

function mInit()
    var tbl = makeTable(10, 5, 'dynTable');

Share this answer

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