Sandbox:LabSignupForm
From OpenWetWare
Jump to navigationJump to search
<html> <script language="javascript"> <!-- var initial_count = new Array(); var rows_limit = 0; // Set to 0 to disable limitation
function addRow(table_id){
var tbl = document.getElementById(table_id);
// counting rows in table
var rows_count = tbl.rows.length;
if (initial_count[table_id] == undefined){
// if it is first adding in this table setting initial rows count
initial_count[table_id] = rows_count;
}
// determining real count of added fields
var tFielsNum = rows_count - initial_count[table_id];
if (rows_limit!=0){
if (tFielsNum >= rows_limit)
return false;
}
var text = 'Text field';
var input = '<input type="text" name="name[]" style="width:100%;"/><input type="text" name="email[]" style="width:100%;"/>';
var remove= '<input type="button" value="X" onclick="removeRow(\''+table_id+'\',this.parentNode.parentNode)" style="width:100%;"/>';
try {
var newRow = tbl.insertRow(rows_count);
var newCell = newRow.insertCell(0);
newCell.innerHTML = text;
var newCell = newRow.insertCell(1);
newCell.innerHTML = input;
var newCell = newRow.insertCell(2);
newCell.innerHTML = remove;
} catch (ex) {
//if exception occurs
alert(ex);
}
}
function removeRow(tbl,row){
var table = document.getElementById(tbl);
try {
table.deleteRow(row.rowIndex);
} catch (ex) {
alert(ex);
}
} // --> </script> <form name="form1" method="post" action="">
<table cellspacing="0" cellpadding="4" id="mytable">
<tr><th colspan="3"><h3>Dynamically Handled Table</h3></th></tr>
<tr><th colspan="3"><input type="button" name="Button" value="Add row" onClick="addRow('mytable')"></th></tr>
</table><br>
</form> </html>
