How to accomodate arrayvalues in dynamic rows

JavaScript
1

I have written code for adding and removing dynamic rows.i am using same file for both ADD

and MODIFY operations.this page is working for ADD operation.

lets say for MODIFY operation one employee has added 3 rows and i need to display those rows
and user can edit thoese rows and finally these values will be submitted to database.

problem is coming in modifyRow() method.how to accomodate array values in the dynamic rows
in modifyRow() method.Please review the code in that method?while loading the values the

structure should be same as addRow() method?



<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script>

  var enoArray = new Array("122","123","124");


var enameArray = new Array(3)
enameArray[0] = "Mike"
enameArray[1] = "Soleman"
enameArray[2] = "Kick"

var salArray = new Array(3)
salArray[0] = "100"
salArray[1] = "200"
salArray[2] = "300"

enoArray.sort();

function addRow()
{
     tbl=document.getElementById('showTable');
  var lastRow = tbl.rows.length;


 
   var row = tbl.insertRow(lastRow);
   var iteration = lastRow;
  
    var cellremoveRow = row.insertCell(0);
    cellremoveRow.innerHTML="<input type='button' value='-' onClick='removeRow(this);'>";


	
  var cellSno = row.insertCell(1);
  cellSno.innerHTML=iteration;


  var cellEmpno = row.insertCell(2);
  cellEmpno.innerHTML="<input type='text' name='empno'  value=''>";



  var cellEname = row.insertCell(3);
  cellEname.innerHTML="<input type='text' name='ename'  value=''>";

  var cellSal = row.insertCell(4);
  cellSal.innerHTML="<input type='text' name='sal'  value=''>";



  var cellAddRow = row.insertCell(5);
 
 for(var i = 0; i < lastRow; i++)
    {
        tbl.rows[i].cells[5].innerHTML = '';
    }
    cellAddRow.innerHTML="<input type='button' value='AddRow' onClick='addRow();'>"; 


 
}

  function removeRow(theRow){
 
  var tab=document.getElementById('showTable');
  index= theRow.parentNode.parentNode.rowIndex;
   var lastRow = tab.rows.length;
  tab.deleteRow(index);
 
  for(i=1;i<tab.rows.length;i++)
  {
   tab.rows[i].cells[1].innerHTML=i;
  }
 
        tab.rows[lastRow-2].cells[5].innerHTML ="<input type='button' value='AddRow' 

onClick='addRow();'>";
    
 
 
}

function modifyRow()
{
var tab=document.getElementById('showTable');
 var lastRow = tab.rows.length;
alert(enoArray.length)

 for(i=0;i<enoArray.length;i++)
{
var row = tab.insertRow();
var cell =row.insertCell();

tab.rows[i].cells[0].innerHTML="<input type='button' value='-' onClick='removeRow(this);'>";
tab.rows[i].cells[2].innerHTML= "<input type='text' name='empno'  value='"+enoArray[i]+"'>"  

;
tab.rows[i].cells[3].innerHTML= "<input type='text' name='empno'  

value='"+enameArray[i]+"'>"  ;
tab.rows[i].cells[4].innerHTML= "<input type='text' name='empno'  value='"+salArray[i]+"'>"  

;
  }




}


</script>
</HEAD>
<BODY onload="modifyRow()">
<table id='showTable' border="0">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>EmpNo</td>
<td>Name</td>
<td>Sal</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>1</td>
<td><input type='text' name='empno' value='' ></td>
<td><input type='text' name='ename' value='' ></td>
<td><input type='text' name='sal' value='' ></td>
<td><input type='button' value='AddRow' onClick='addRow();'> </td>
</tr>
</table>
</BODY>
</HTML>