- clicking + button gives u a new row beneath it,
- each row has unique id for each element
- New row is generated by cloning the selected component,so all the value present in the previous component
- Also gets cloned,which we have to remove("ChangeId" button does the same thing).
- Change ID button assigns unique value to all component as well as removes the cloned data from component
- "CheckID" button is given to check the id of each row,so that you can know the id was really changed.(Useful if you are not using debugger like firebug)
- Select All the checkbox which you want to delete,click on delete btn,it will delete the row for you
Steps
****
****
click on CheckID to know the id of each component
Enter values to any rows components,and click its + symbol
Click "ChangeId" Btn to change id,and previous cloned value removed
Again click on "CheckMe" to check the new id created for the newly inserted row
Select some checkbox and click on "Delete" to delete the row
Folder Structure
************
************
Note:You can take any .jpg file instead of png's,make sure the height and width is appropriate
DynamicForm.html
***************
<html>
<head>
<title></title>
<script src="script/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
var index=1;
var flag=5;//because i have only 5 rows initially,so the counter for 6th onwards
$(document).ready(function()
{
index++;
$("#btnDel").click(function(){
$('input:checkbox:checked').each(function()
{
var idno=$(this).attr("id").substring(3,4);//get access to current checkbox number
alert(idno);
$("#row"+idno).remove();
});
// alert('deleteBtn():called');
});
$("[id^=ref]").click(function()
{
//alert("clicked");
flag++;
//get the position where you want to insert table
var pos=$(this).attr('id').substring(3,4);
$("#row"+pos).clone(false).insertAfter("#row"+pos).attr({id:"row"+flag});
$("#cbx1 last").attr({id:"cbx7"});
});
$("#btnChk").click(function(){
$("input").each(function(){
alert($(this).attr("id"));
});
});
$("#btnChangeId").click(function()
{
$("#row"+flag+" input:checkbox").attr({id:"cbx"+flag});
$("#row"+flag+" input:text[id^=text]").attr({id:"text"+flag});
$("#row"+flag+" input:text[id^=age]").attr({id:"age"+flag});
//nullify the value
/**
$("#row"+flag+" input:checkbox").attr('selected', false);
$("#row"+flag+" input:text[id^=text]").val("");
$("#row"+flag+" input:text[id^=age]").val("");
**/
//another quickest Approach to nullify
$("#text"+flag).val("");
$("#age"+flag).val("");
$("#cbx"+flag).attr({checked:false});
});
});
</script>
</head>
<body>
<form id="myForm">
<table id="dataTable">
<tr><td></td><td>Name</td><td>Age</td></tr>
<tr id="row1"><td><input type=checkbox name="cbx1" id="cbx1"></td><td><input type=text value="" id="text1"></td><td><input type=text value="" id="age1"></td><td><div id="ref1"><img src="image/plus1.png" height="10" width="10"></div></td></tr>
<tr id="row2"><td><input type=checkbox name="cbx2" id="cbx2"></td><td><input type=text value="" id="text2"></td><td><input type=text value="" id="age2"></td><td><div id="ref2"><img src="image/plus1.png" height="10" width="10"></div></td></tr>
<tr id="row3"><td><input type=checkbox name="cbx3" id="cbx3"></td><td><input type=text value="" id="text3"></td><td><input type=text value="" id="age3"></td><td><div id="ref3"><img src="image/plus1.png" height="10" width="10"></div></td></tr>
<tr id="row4"><td><input type=checkbox name="cbx4" id="cbx4"></td><td><input type=text value="" id="text4"></td><td><input type=text value="" id="age4"></td><td><div id="ref4"><img src="image/plus1.png" height="10" width="10"></div></td></tr>
<tr id="row5"><td><input type=checkbox name="cbx5" id="cbx5"></td><td><input type=text value="" id="text5"></td><td><input type=text value="" id="age5"></td><td><div id="ref5"><img src="image/plus1.png" height="10" width="10"></div></td></tr>
</table>
<input type="button" id="btnDel" value="Delete"/>
<input type="button" id="btnChk" value="CheckID"/>
<input type="button" id="btnChangeId" value="ChangeID"/>
</form>
</body>
</html>
No comments:
Post a Comment