Member Avatar for chaituu

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>
  • 2 Contributors
  • 1 Reply
  • 77 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by fxm
Member Avatar for fxm

This

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(-1);
        row.insertCell(-1);
        row.insertCell(-1);
        row.insertCell(-1);
        row.insertCell(-1);
        tab.rows[i].cells[0].innerHTML = "<input type='button' value='-' onClick='removeRow(this);'>";
        tab.rows[i].cells[1].innerHTML = "<input type='text' name='empno'  value='" + enoArray[i] + "'>";
        tab.rows[i].cells[2].innerHTML = "<input type='text' name='empno'  value='" + enameArray[i] + "'>";
        tab.rows[i].cells[3].innerHTML = "<input type='text' name='empno'  value='" + salArray[i] + "'>";
    }
}

corrects a few of the obvious errors.

Perhaps when you have the display fixed you can explain what else is not working.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.