Jquery Clone Table Row Example - Jquery

How to clone table row using jquery?

Snippet Code

Rate this page :
  [ 1 votes]

The jquery clone code creates a table row with add and remove button. A new unique row is cloned below the current one when add button is clicked and the cloned row can be deleted using remove button.

<script type='text/javascript'> var x=2; function add() { element = $("#dell"); element.css("display","block"); var s = document.getElementById("a").getElementsByTagName("TBODY")[0]; var trow = document.createElement("tr"); var tcol1 = document.createElement("td"); var tcol2 = document.createElement("td"); var d = document.createElement("input"); d.setAttribute("type","text"); d.setAttribute("size","10"); d.setAttribute("id","xvalu"+x); var e = document.createElement("input"); e.setAttribute("type","text"); e.setAttribute("size","10"); e.setAttribute("id","yvalu"+x); tcol1.appendChild(d); tcol2.appendChild(e); trow.appendChild(tcol1); trow.appendChild(tcol2); s.appendChild(trow); if(x>10){ element = $("#addd"); element.css("display","none"); } x++; } function del() { element = $("#dell"); element.css("display","block"); if (x<=3) { element = $("#dell"); element.css("display","none"); element = $("#addd"); element.css("display","block"); } if(x>2){ var len = x.length; var s = document.getElementById("a").getElementsByTagName("TBODY")[0]; s.removeChild(s.lastChild); x=x-1; } } </script> <table width=50%> <tr><td> <table id=a width=50%><tbody><tr><td>X Value</td><td>Y Value</td></tr> <tr> <td><input id=xvalu0 type=text size=10></td> <td> <input id=yvalu0 type=text size=10></td> </tr> <tr> <td><input id=xvalu1 type=text size=10></td> <td><input id=yvalu1 type=text size=10></td> </tr></tbody> <tr align='right'><td><a style=text-decoration:none; href=javascript:add() id='addd'>Add</a></td> <td> <a style=text-decoration:none;display:none; href=javascript:del() id='dell'>Remove</a></td> </tr></table> </td></tr> </table>


Ask Questions

Ask Question