Hi friends. I am sharing with you that how to generate dynamic row and also delete that dynamic generated row this concept is used when u will developed billing software because in billing software we do not know how many item purchase by customer. So base on customer item we need to generate row or this can be used in the storing contact details of person. Here I giving example for storing contact details of person
For This example we need to include the jQuery.js file.
This GenerateRow.html file which is generated row and delete row.
<html>
<head>
<script src="jquery.js"></script>
<script>
var k;
$(document).ready(function()
{
k=1; //for first row
$("#rdata").append(showData());
$("#add").live('click',function()
{
k++;
$('#rdata').append(showData());
$("#counter").val(k);
});
});
function lremove(l)
{
var lid=l.id;
var rowno = lid.match(/\d+$/);
if(rowno>1) //if only one row then i am now allow to remove.if more than then remove that row
{
$("#line"+rowno).remove();
}
}
function showData()
{
var str="<table><tr id='line"+k+"'>"
+"<td align='center' width='20'>"
+"<font face='calibri' size='2' color='#'><b>"+k+")</b></font>"
+"</td>"
+"<td align='center' width='150'>"
+"<input type='text' name='name"+k+"' id='name"+k+"' >"
+"</td>"
+"<td align='center' width='80'>"
+"<input type='text' name='number"+k+"' id='number"+k+"' value=''>"
+"</td>"
+"<td align='center'>"
+"<input type='button' id='add' value='+' height='15' width='15'/></td>"
+"<td><input type='button' value='x' id='remove"+k+"' onclick='lremove(this)' src='Delete.png' height='30' width='30'/></td>"
+"</tr></table>";
return str;
}
</script>
</head>
<body>
<table>
<caption>Storing Mobile Number</catption>
<tr>
<td width='70'></td>
<td width='140' align='left'>Name</td>
<td width='150' align='left'>Mobile Number</td>
</tr>
</table>
<form name="frminfom" action="ConnectRowGenerate.jsp">
<div id="rdata">
</div>
<input type="hidden" value="1" name="counter" id="counter">
<input type="submit" value="submit">
<input type="reset" value="clear">
</form>
</body>
</html>
in this above example i used the
$(document).ready(function()
{
code
});
this above function of jQuery which is called after document will be load or after your document will be ready.
inside this i am writing following code.
k=1;
$("#rdata").append(showData());
k-> variable i used for giving each row unique name.
rdata-> is an div id in which i need to add a row
append(showData())
this append method is used for append content at last in div(rdata).
showData() is an function which it will return the Dynamically generated row so that row i am passing as a parameter of append so its will append to rdata (div tag).
eg.append(showData()).
The ShowData function containt
str="<table><tr id='line"+k+"'>"
.....
return str;
here i used table and i am storing this table into the str variable because i need to return thats why and i assigning the unique row id
like id='line"+k"'
so this will replace as line1 after u generated second row it will line2 as k variable will increase when you add the new row.
$("#add").live('click',function()
{
});
this function will invokes when user click on the add button
the live() is an method which is providing the fecilities for firing the on click(othere even) event on new generated add button if you will not used live then its add only one row.
Removing row
<input type='button' value='x' id='remove"+k+"' onclick='lremove(this)' src='Delete.png' height='30' width='30'/>
here when user click on remove button i am passing the 'this' object which is reffere the current row remove button object and in function
function lremove(l)
Now here 'this' is an object will replace with 'l' object name and get id from object.
var lid=l.id
now lid will store the id of remove button..e.g remove1,remove2..
var rowno = lid.match(/\d+$/);
this will extract last digits from the string.
e.g remove1 then its will return 1.
$("#line"+rowno).remove();
here line is common when you generating row its one row value containt line1,line2.
so line will same just i need to contacate the number of line and remove() method is used for remove the specific tag.
How to Read values using jsp file ConnectRowGenerate.jsp when user click on submit button.
code.
<%
int counter=Integer.parseInt(request.getParameter("counter"));
for(int i=1;i<=counter;i++)
{
try
{
String name=request.getParameter("name"+i);
String number=request.getParameter("number"+i);
out.println(name + " "+number+"<br>");
}
catch(Exception e)
{
continue;
}
}
%>
Now we will understand above code
counter variable which containt thea number of row add in page.
try and catch block as if user will removed line from middle and we try to read that value which is not available then it will throw exception so for that i am writing code in try and catch block and if it will throw error then its will go in catch block and again its will continue reading with next row or line.
output:
when you open GenerateRow.html its will show like following.
if you click on add button it will add new row.
if you click on delete button it will remove row but here first row its not remove as i am gave validation so now when u click on submit its will call the ConnectRowGenerate.jsp file and its will display the data.
You can download above example from here
