Sandbox:LabSignupForm

From OpenWetWare
Jump to: navigation, 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>