here i have created one small application for adding or removing the rows from your tables.
many times we are not sure how much length of user input is for ex. in case of
address field we are not sure how much length of data is so that time this coolest add/remove rows function will use.
just try it .
here is the basic java script.
<html>
<head>
<title> Add/Remove Rows in Table </title>
<script language="javascript">
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "checkbox";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
cell2.innerHTML = rowCount + 1;
var cell3 = row.insertCell(2);
var element2 = document.createElement("input");
element2.type = "text";
cell3.appendChild(element2);
}
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
}
function SubmitForm()
{
// your form Validation code goes here ...
}
</SCRIPT>
</head>
<body>
<TABLE id="dataTable" width="350px" border="1">
<TR>
<TH>Select</TH>
<TH>Sr. No.</TH>
<TH>Value</TH>
</TR>
<TR>
<TD><INPUT type="checkbox" name="chk"/></TD>
<TD> 1 </TD>
<TD> <INPUT type="text" /> </TD>
</TR>
</TABLE>
<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
<INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
<INPUT type="button" value="submit" onclick="SubmitForm()" />
</BODY>
</HTML>
hope u like it .,.... just commnet it.. the jquery example i will post it on my next post.
