Adding multiple rows..

[didi86]

Please help me to adding multiple row at a time...

// Last updated 2006-02-21
 
<script language="javascript">
function addRowToTable()
{
  var tbl = document.getElementById('tblSample');
  var lastRow = tbl.rows.length;
  // if there's no header row in the table, then iteration = lastRow + 1
  var iteration = lastRow;
  var row = tbl.insertRow(lastRow);
 
  // left cell
  var cellLeft = row.insertCell(0);
  var textNode = document.createTextNode(iteration);
  cellLeft.appendChild(textNode);
 
  // right cell
  var cellRight = row.insertCell(1);
  var el = document.createElement('input');
  el.type = 'text';
  el.name = 'txtRow' + iteration;
  el.id = 'txtRow' + iteration;
  el.size = 40;
 
  el.onkeypress = keyPressTest;
  cellRight.appendChild(el);
 
  // select cell
  var cellRightSel = row.insertCell(2);
  var sel = document.createElement('select');
  sel.name = 'selRow' + iteration;
  sel.options[0] = new Option('text zero', 'value0');
  sel.options[1] = new Option('text one', 'value1');
  cellRightSel.appendChild(sel);
}
 
 
function keyPressTest(e, obj)
{
  var validateChkb = document.getElementById('chkValidateOnKeyPress');
  if (validateChkb.checked) {
    var displayObj = document.getElementById('spanOutput');
    var key;
    if(window.event) {
      key = window.event.keyCode; 
    }
    else if(e.which) {
      key = e.which;
    }
    var objId;
    if (obj != null) {
      objId = obj.id;
    } else {
      objId = this.id;
    }
    displayObj.innerHTML = objId + ' : ' + String.fromCharCode(key);
  }
}
 
 
 
function removeRowFromTable()
{
  var tbl = document.getElementById('tblSample');
  var lastRow = tbl.rows.length;
  if (lastRow > 2) tbl.deleteRow(lastRow - 1);
}
 
 
 
function openInNewWindow(frm)
{
  // open a blank window
  var aWindow = window.open('', 'TableAddRowNewWindow',
   'scrollbars=yes,menubar=yes,resizable=yes,toolbar=no,width=400,height=400');
 
  // set the target to the blank window
  frm.target = 'TableAddRowNewWindow';
 
  // submit
  frm.submit();
}
 
 
 
function validateRow(frm)
{
  var chkb = document.getElementById('chkValidate');
  if (chkb.checked) {
    var tbl = document.getElementById('tblSample');
    var lastRow = tbl.rows.length - 1;
    var i;
    for (i=1; i<=lastRow; i++) {
      var aRow = document.getElementById('txtRow' + i);
      if (aRow.value.length <= 0) {
        alert('Row ' + i + ' is empty');
        return;
      }
    }
  }
  openInNewWindow(frm);
}
</script>
 
<form action="tableaddrow_nw.html" method="get">
<p>
<input type="button" value="Add" onclick="addRowToTable();" />
<input type="button" value="Remove" onclick="removeRowFromTable();" />
<input type="button" value="Submit" onclick="validateRow(this.form);" />
<input type="checkbox" id="chkValidate" /> Validate Submit
</p>
<p>
<input type="checkbox" id="chkValidateOnKeyPress" checked="checked" /> Display OnKeyPress
<span id="spanOutput" style="border: 1px solid #000; padding: 3px;"> </span>
</p>
<table border="1" id="tblSample">
    <table border="1" id="referfs">
    <tr>
  <tr>
  <td> 1.</td>
    <td size = "30">Salutation</td>
    <td>:</td>
        <td>
    <select name="selRow0">
    <option value="value0">Mr</option>
    <option value="value1">Ms</option>
    <option value="value1">Madam</option>
    </select>
    </td>
  </tr>
 
  <tr>
     <td> </td>
    <td size = "30">Friend's Name</td>
    <td>:</td>
    <td><input type="text" name="txtRow1" id="txtRow1" size="20" onkeypress="keyPressTest(event, this);" /></td>
  </tr>
 
    <tr>
     <td> </td>
    <td size = "30">Friend's Email</td>
    <td>:</td>
    <td><input type="text" name="txtRow1" id="txtRow1" size="20" onkeypress="keyPressTest(event, this);" /></td>
  </tr>
 
    <tr>
     <td> </td>
    <td size = "30">Friend's Phone Number</td>
    <td>:</td>
    <td><input type="text" name="txtRow1" id="txtRow1" size="20" onkeypress="keyPressTest(event, this);" /></td>
  </tr>
  </tr>
  </table>
</table>
</form>

Hope anybody can help me to finish this code..:(

[acoder]

By multiple, do you mean a fixed number, e.g. 2, or a number that you want to allow the user to decide?

[didi86]

if u try run tis code and u click add button..only the last row will added..
In my case, I want row start from "Salutation" till row phone number will repeat..means that when click add button, 4 row will added..
thanks..:)

[acoder]

Just extend the code in addRowToTable(). Which part of that code do you not understand?