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.
E.g
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.
HTML:
<button id="doSomethingBtn">Do Something</button>
Javascript:
document.getElementById('doSomethingBtn').addEventListener(click, doSomethingFunc, false);
<!DOCTYPE html>
<html>
<head>
<script>
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)
{
index=element.className.indexOf(newStr);
if ( index == -1)
element.className += ' '+newStr;
else
{
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 (reference.nextSibling)
{
reference.parentNode.insertBefore(node,reference.nextSibling);
}
else {
reference.parentNode.appendChild(node);
}
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');
document.body.appendChild(tbl);
}
</script>
<style>
</style>
</head>
<body>
</body>
</html>
Submit an article or tip