<script src="jquery/jquery-1.3.1.js"></script>
<style type="text/css">
body{background:#FFFFFF;}
</style>
</head>
<body>
<script>
$(function(){
var show_count = 20; //Number of bars to display
var count = $("input:text").val(); //Increment the starting value, and here's your ID
var fin_count = parseInt(count) + (show_count-1); //Close the increasing condition
$("#btn_addtr").click(function(){
if(count < fin_count) //When clicked, if the current number is less than the condition that the increment ends
{
$("tr:eq(1)").clone().appendTo("table"); //Add a row after the table
$("tr:last td input:first").val(++count); //Change the ID value of the added row.
}
});
});
function deltr(){
var length=$("tr").length;
if(length<=2){
alert(" Keep at least one line ");
}else{
$("tr:last").remove();
}
}
</script>
<input type="button" id="btn_addtr" value=" Add line ">
<table id="dynamicTable" width="700" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="30" align="center" bgcolor="#CCCCCC">ID</td>
<td align="center" bgcolor="#CCCCCC">Username</td>
<td align="center" bgcolor="#CCCCCC">Usertype</td>
<td align="center" bgcolor="#CCCCCC">Other</td>
<td></td>
</tr>
<tr>
<td height="30" align="center"><input type="text" size="2" value="1" /></td>
<td align="center"><input type="text" name="username" /></td>
<td align="center">
<select name="type">
<option value="1">Administrator</option>
<option value="2">Guest</option>
</select>
</td>
<td align="center"><input type="text" name="username2" /></td>
<td><input type="button" id="btn_deltr" onclick="deltr()" value=" Delete rows "></td>
</tr>
</table>
</body>