Jquery Clone Table Row Example - Jquery
How to clone table row using jquery?
Snippet Code
Rate this page :
|
[ 0 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>
