Dear Paul,
I have done the changes according to your suggestions. My problem now is that is that each time I add the row the data from the first row get copied into the new rows. So I tried this function prot.find(“input[[name=‘col4’]”).val(); and prot.find(“.dOnly”).val(“”); to clear for one column both not working. Then I also wanted to restrict the col4 to just decimal via this method jQuery(‘.dOnly’).keyup(function () also not working. Can you see what are my mistakes here?
<html>
<head>
<script src=“http://code.jquery.com/jquery-1.5.1.min.js”></script>
<script>
$(document).ready(function() {
var id = 0;
// Add button functionality
$("table.dynatable button.add").click(function() {
id++;
var master = $(this).parents("table.dynatable");
// Get a new row based on the prototype row
var prot = master.find(".prototype").clone();
prot.attr("class", "")
prot.find(".id").attr("value", id);
//prot.find("input[[name='col4[]']").val();
prot.find(".dOnly").val("");
master.find("tbody").append(prot);
return false;
});
// Remove button functionality
$("table.dynatable button.remove").live("click", function() {
$(this).parents("tr").remove();
});
jQuery('.dOnly').keyup(function ()
{
this.value = this.value.replace(/[^0-9\\.]/g,'');
});
});
</script>
<style>
.dynatable {
border: solid 1px #000;
border-collapse: collapse;
}
.dynatable th,
.dynatable td {
background-color:#ccc;
font-size:14px;
font-color:#ffffff;
font-family:Calibri;
}
.dynatable .prototype {
}
</style>
</head>
<body>
<form action="<?=$_SERVER['PHP_SELF']?>" method="post" name="form1" enctype="multipart/form-data" id=form1 >
<table class="dynatable">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Col 3</th>
<th>Col 4</th>
<th><button class="add">Add</button></th>
</tr>
</thead>
<tbody>
<tr class="prototype">
<td><input type="text" name="id[]" value="0" class="id" /></td>
<td><input type="text" name="name[]" value="" /></td>
<td><input type="text" name="col4[]" value="" class="dOnly" /></td>
<td><input type="text" name="col3[]" value="" /></td>
<td><button class="remove">Remove</button>
</tr>
</table>
<input class="buttons" type="Submit" name="Submit" value="Submit">
</form>
</body>
</html>