1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 8:42 am May 14, 2026

Forum Moderators: open

Message Too Old, No Replies

Add new rows to dynamically added rows

         

ashishtiwari19

9:31 am on Apr 15, 2008 (gmt 0)

10+ Year Member



Hi to everyone, i have been googling net for dynamically addition of rows & got many scripts that actually work. but my problem is, i need a nested row updation
i.e. plz see the jpg below, i want that i should be able to dynamically add all the rows( one by one ofcourse) in the table. am finding that impossible to do. kindly help me out with this coz i have wasted lot of time on this, & one more thing am not very familiar with js so plz be descreptive in answering. thanx in advance an help will be of great help. am giving the code that am using now.

the code 

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php echo $title;?></title>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<script language="javascript"> 
function addRowToTable()
{
 var tbl = document.getElementById('detailsTable');
 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(0);
 var el = document.createElement('input');
 el.type = 'text';
 el.name = 'txtRow' + iteration;
 el.id = 'txtRow' + iteration;
 el.size = '15';
 cellRight.appendChild(el);
 
 // select cell
 var cellRight1 = row.insertCell(1);
 var el1 = document.createElement('input');
 el1.type = 'text';
 el1.name = 'wip' + iteration;
 el1.id = 'wip' + iteration;
 el1.size = '15';
 cellRight1.appendChild(el1);
 
 var cellRight2 = row.insertCell(2);
 var el2 = document.createElement('input');
 el2.type = 'text';
 el2.name = 'fg' + iteration;
 el2.id = 'fg' + iteration;
 el2.size = '15';
 cellRight2.appendChild(el2);
 
 var cellRight2 = row.insertCell(3);
 var el2 = document.createElement('input');
 el2.type = 'text';
 el2.name = 'fg' + iteration;
 el2.id = 'fg' + iteration;
 el2.size = '15';
 cellRight2.appendChild(el2);
 var cellRight2 = row.insertCell(4);
 var el2 = document.createElement('input');
 el2.type = 'text';
 el2.name = 'fg' + iteration;
 el2.id = 'fg' + iteration;
 el2.size = '15';
 cellRight2.appendChild(el2);
 
 var cellRight2 = row.insertCell(5);
 var el2 = document.createElement('input');
 el2.type = 'text';
 el2.name = 'fg' + iteration;
 el2.id = 'fg' + iteration;
 el2.size = '15';
 cellRight2.appendChild(el2);
 
 var cellRight2 = row.insertCell(6);
 var el2 = document.createElement('input');
 el2.type = 'text';
 el2.name = 'fg' + iteration;
 el2.id = 'fg' + iteration;
 el2.size = '15';
 cellRight2.appendChild(el2);
 
 var cellRight2 = row.insertCell(7);
 var el2 = document.createElement('input');
 el2.type = 'text';
 el2.name = 'fg' + iteration;
 el2.id = 'fg' + iteration;
 el2.size = '15';
 cellRight2.appendChild(el2);
 }
 
 
 
var gRowId = 2;
function addRow()
{
var tbody = document.getElementById('stepsInnerTable').getElementsByTagName('tbody')[1];
var gRowId1 = gRowId;
var row = document.createElement('TR');
var cell1 = document.createElement('TD');
var cell2 = document.createElement('TD');
var cell3 = document.createElement('TD');
var cell4 = document.createElement('TD');
var cell5 = document.createElement('TD');
var cell6 = document.createElement('TD');
var cell7 = document.createElement('TD');
var cell8 = document.createElement('TD');
var cell9 = document.createElement('TD');
var inp1 = document.createElement('INPUT');
var inp2 = document.createElement('INPUT');
var inp3 = document.createElement('INPUT');
var inp4 = document.createElement('INPUT');
var inp5 = document.createElement('INPUT');
var inp6 = document.createElement('INPUT');
var inp7 = document.createElement('INPUT');
var inp8 = document.createElement('INPUT');
var inp9 = document.createElement('INPUT');
inp1.setAttribute('type','text');
inp1.setAttribute('name','usertxt'+gRowId1);
inp1.setAttribute('value','Original Row'+gRowId1);
inp1.setAttribute('size','15');
inp1.id='usertxt'+gRowId1;
inp2.setAttribute('type','text');
inp2.setAttribute('name','srow'+gRowId1);
inp2.setAttribute('value','Original Col'+gRowId1);
inp2.setAttribute('size','15');
inp2.id='srow'+gRowId1;
inp3.setAttribute('type','text');
inp3.setAttribute('name','srow'+gRowId1);
inp3.setAttribute('value','Original Col'+gRowId1);
inp3.setAttribute('size','15');
inp3.id='srow'+gRowId1;
inp4.setAttribute('type','text');
inp4.setAttribute('name','srow'+gRowId1);
inp4.setAttribute('value','Original Col'+gRowId1);
inp4.setAttribute('size','15');
inp4.id='srow'+gRowId1;
inp5.setAttribute('type','text');
inp5.setAttribute('name','srow'+gRowId1);
inp5.setAttribute('value','Original Col'+gRowId1);
inp5.setAttribute('size','15');
inp5.id='srow'+gRowId1;
inp6.setAttribute('type','text');
inp6.setAttribute('name','srow'+gRowId1);
inp6.setAttribute('value','Original Col'+gRowId1);
inp6.setAttribute('size','15');
inp6.id='srow'+gRowId1;
inp7.setAttribute('type','text');
inp7.setAttribute('name','srow'+gRowId1);
inp7.setAttribute('value','Original Col'+gRowId1);
inp7.setAttribute('size','15');
inp7.id='srow'+gRowId1;
inp8.setAttribute('type','text');
inp8.setAttribute('name','srow'+gRowId1);
inp8.setAttribute('value','Original Col'+gRowId1);
inp8.setAttribute('size','15');
inp8.id='srow'+gRowId1;
inp9.setAttribute('type','text');
inp9.setAttribute('name','srow'+gRowId1);
inp9.setAttribute('value','Original Col'+gRowId1);
inp9.setAttribute('size','15');
inp9.id='srow'+gRowId1;
cell1.innerHTML = gRowId;
cell2.appendChild(inp1);
//cell2.appendChild(anc);
cell3.appendChild(inp2);
cell4.appendChild(inp3);
cell5.appendChild(inp4);
cell6.appendChild(inp5);
cell7.appendChild(inp6);
cell8.appendChild(inp7);
cell9.appendChild(inp8);
row.appendChild(cell1);
row.appendChild(cell2);
row.appendChild(cell3);
row.appendChild(cell4);
row.appendChild(cell5);
row.appendChild(cell6);
row.appendChild(cell7);
row.appendChild(cell8);
row.appendChild(cell9);
tbody.appendChild(row);
gRowId++;
}
var gRowIdi = 2;
function addRow1()
{
var tbody = document.getElementById('detailsTable2').getElementsByTagName('tbody')[0];
var gRowId1 = gRowIdi;
var row = document.createElement('TR');
var cell1 = document.createElement('TD');
var cell2 = document.createElement('TD');
var cell3 = document.createElement('TD');
var cell4 = document.createElement('TD');
var cell5 = document.createElement('TD');
var cell6 = document.createElement('TD');
var cell7 = document.createElement('TD');
var cell8 = document.createElement('TD');
var cell9 = document.createElement('TD');
var inp1 = document.createElement('INPUT');
var inp2 = document.createElement('INPUT');
var inp3 = document.createElement('INPUT');
var inp4 = document.createElement('INPUT');
var inp5 = document.createElement('INPUT');
var inp6 = document.createElement('INPUT');
var inp7 = document.createElement('INPUT');
var inp8 = document.createElement('INPUT');
var inp9 = document.createElement('INPUT');
inp1.setAttribute('type','text');
inp1.setAttribute('name','usertxt'+gRowId1);
inp1.setAttribute('value','Original Row'+gRowId1);
inp1.setAttribute('size','15');
inp1.id='usertxt'+gRowId1;
inp2.setAttribute('type','text');
inp2.setAttribute('name','srow'+gRowId1);
inp2.setAttribute('value','Original Col'+gRowId1);
inp2.setAttribute('size','15');
inp2.id='srow'+gRowId1;
inp3.setAttribute('type','text');
inp3.setAttribute('name','srow'+gRowId1);
inp3.setAttribute('value','Original Col'+gRowId1);
inp3.setAttribute('size','15');
inp3.id='srow'+gRowId1;
inp4.setAttribute('type','text');
inp4.setAttribute('name','srow'+gRowId1);
inp4.setAttribute('value','Original Col'+gRowId1);
inp4.setAttribute('size','15');
inp4.id='srow'+gRowId1;
inp5.setAttribute('type','text');
inp5.setAttribute('name','srow'+gRowId1);
inp5.setAttribute('value','Original Col'+gRowId1);
inp5.setAttribute('size','15');
inp5.id='srow'+gRowId1;
inp6.setAttribute('type','text');
inp6.setAttribute('name','srow'+gRowId1);
inp6.setAttribute('value','Original Col'+gRowId1);
inp6.setAttribute('size','15');
inp6.id='srow'+gRowId1;
inp7.setAttribute('type','text');
inp7.setAttribute('name','srow'+gRowId1);
inp7.setAttribute('value','Original Col'+gRowId1);
inp7.setAttribute('size','15');
inp7.id='srow'+gRowId1;
inp8.setAttribute('type','text');
inp8.setAttribute('name','srow'+gRowId1);
inp8.setAttribute('value','Original Col'+gRowId1);
inp8.setAttribute('size','15');
inp8.id='srow'+gRowId1;
inp9.setAttribute('type','text');
inp9.setAttribute('name','srow'+gRowId1);
inp9.setAttribute('value','Original Col'+gRowId1);
inp9.setAttribute('size','15');
inp9.id='srow'+gRowId1;
cell1.innerHTML = gRowIdi;
cell2.appendChild(inp1);
//cell2.appendChild(anc);
cell3.appendChild(inp2);
cell4.appendChild(inp3);
cell5.appendChild(inp4);
cell6.appendChild(inp5);
cell7.appendChild(inp6);
cell8.appendChild(inp7);
cell9.appendChild(inp8);
row.appendChild(cell1);
row.appendChild(cell2);
row.appendChild(cell3);
row.appendChild(cell4);
row.appendChild(cell5);
row.appendChild(cell6);
row.appendChild(cell7);
row.appendChild(cell8);
row.appendChild(cell9);
tbody.appendChild(row);
gRowIdi++;
}
var gRowIdj = 2;
function addRow2()
{
var tbody = document.getElementById('detailsTable3').getElementsByTagName('tbody')[0];
var gRowId1 = gRowIdj;
var row = document.createElement('TR');
var cell1 = document.createElement('TD');
var cell2 = document.createElement('TD');
var cell3 = document.createElement('TD');
var cell4 = document.createElement('TD');
var cell5 = document.createElement('TD');
var cell6 = document.createElement('TD');
var cell7 = document.createElement('TD');
var cell8 = document.createElement('TD');
var cell9 = document.createElement('TD');
var inp1 = document.createElement('INPUT');
var inp2 = document.createElement('INPUT');
var inp3 = document.createElement('INPUT');
var inp4 = document.createElement('INPUT');
var inp5 = document.createElement('INPUT');
var inp6 = document.createElement('INPUT');
var inp7 = document.createElement('INPUT');
var inp8 = document.createElement('INPUT');
var inp9 = document.createElement('INPUT');
inp1.setAttribute('type','text');
inp1.setAttribute('name','usertxt'+gRowId1);
inp1.setAttribute('value','Original Row'+gRowId1);
inp1.setAttribute('size','15');
inp1.id='usertxt'+gRowId1;
inp2.setAttribute('type','text');
inp2.setAttribute('name','srow'+gRowId1);
inp2.setAttribute('value','Original Col'+gRowId1);
inp2.setAttribute('size','15');
inp2.id='srow'+gRowId1;
inp3.setAttribute('type','text');
inp3.setAttribute('name','srow'+gRowId1);
inp3.setAttribute('value','Original Col'+gRowId1);
inp3.setAttribute('size','15');
inp3.id='srow'+gRowId1;
inp4.setAttribute('type','text');
inp4.setAttribute('name','srow'+gRowId1);
inp4.setAttribute('value','Original Col'+gRowId1);
inp4.setAttribute('size','15');
inp4.id='srow'+gRowId1;
inp5.setAttribute('type','text');
inp5.setAttribute('name','srow'+gRowId1);
inp5.setAttribute('value','Original Col'+gRowId1);
inp5.setAttribute('size','15');
inp5.id='srow'+gRowId1;
inp6.setAttribute('type','text');
inp6.setAttribute('name','srow'+gRowId1);
inp6.setAttribute('value','Original Col'+gRowId1);
inp6.setAttribute('size','15');
inp6.id='srow'+gRowId1;
inp7.setAttribute('type','text');
inp7.setAttribute('name','srow'+gRowId1);
inp7.setAttribute('value','Original Col'+gRowId1);
inp7.setAttribute('size','15');
inp7.id='srow'+gRowId1;
inp8.setAttribute('type','text');
inp8.setAttribute('name','srow'+gRowId1);
inp8.setAttribute('value','Original Col'+gRowId1);
inp8.setAttribute('size','15');
inp8.id='srow'+gRowId1;
inp9.setAttribute('type','text');
inp9.setAttribute('name','srow'+gRowId1);
inp9.setAttribute('value','Original Col'+gRowId1);
inp9.setAttribute('size','15');
inp9.id='srow'+gRowId1;
cell1.innerHTML = gRowIdj;
cell2.appendChild(inp1);
//cell2.appendChild(anc);
cell3.appendChild(inp2);
cell4.appendChild(inp3);
cell5.appendChild(inp4);
cell6.appendChild(inp5);
cell7.appendChild(inp6);
cell8.appendChild(inp7);
cell9.appendChild(inp8);
row.appendChild(cell1);
row.appendChild(cell2);
row.appendChild(cell3);
row.appendChild(cell4);
row.appendChild(cell5);
row.appendChild(cell6);
row.appendChild(cell7);
row.appendChild(cell8);
row.appendChild(cell9);
tbody.appendChild(row);
gRowIdj++;
}
function removeRowFromTable()
{
 var tbl = document.getElementById('tblSample');
 var lastRow = tbl.rows.length;
 if (lastRow > 2) tbl.deleteRow(lastRow - 1);
}
</script> 
</head>
<body>
<form method="post" action="">
<table id="outerBigTable" border="1">
<tr>
<td style="width: 35px">&nbsp;</td>
<td style="width: 25px">&nbsp;</td>
<td style="width: 25px">&nbsp;</td>
<td style="width: 95px">&nbsp;</td>
<td style="width: 105px">&nbsp;</td>
<td style="width: 95px">&nbsp;</td>
<td style="width: 125px">&nbsp;</td>
<td style="width: 135px">&nbsp;</td>
<td style="width: 135px">&nbsp;</td>
<td style="width: 135px">&nbsp;</td>
<td style="width: 135px">&nbsp;</td>
</tr>
<tr>
<td style="width: 35px">1</td>
<td colspan="10">
<table id="innerDiffMethodsTable" border="1">
<tr>
<td style="width: 55px">1</td>
<td>
<table id="stepsInnerTable" border="1">
<tbody>
<tr>
<td style="width: 35px">1</td>
<td>
<table id="detailsTable" border="1">
<tr>
<td style="width: 90px"><input name="Text1" type="text" size="15"/></td>
<td style="width: 105px"><input name="Text2" type="text" size="15"/></td>
<td style="width: 95px"><input name="Text3" type="text" size="15"/></td>
<td style="width: 125px"><input name="Text4" type="text" size="15"/></td>
<td style="width: 135px"><input name="Text5" type="text" size="15"/></td>
<td style="width: 135px"><input name="Text6" type="text" size="15"/></td>
<td style="width: 135px"><input name="Text7" type="text" size="15"/></td>
<td style="width: 115px"><input name="Text8" type="text" size="15"/></td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<table id="detailsTable2" border="1">
<tbody>
<tr>
<table id="detailsTable3" border="1">
<tbody>
<tr>
</tr>
</tbody>
</table>
</tr>
</tbody>
</table>
</tr>
</table>
</td>
</tr>
</table>
<br/><br/>
<a href="javascript:addRowToTable()">Add More Rows Sub Steps Details</a><br/><br/>
<a href="javascript:addRow()">Add More Rows Steps Details</a><br/><br/>
<a href="javascript:addRow1()">3Add More Rows Sub Steps Details</a><br/><br/>
<a href="javascript:addRow2()">4Add More Rows Sub Steps Details</a><br/><br/>
</form>
</body>
</html>

[edited by: jatar_k at 1:22 pm (utc) on April 16, 2008]
[edit reason] no urls thanks [/edit]

httpwebwitch

1:35 pm on Apr 15, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi ashishtiwari19, Welcome to WebmasterWorld!

I can't offer much comfort - you're using all the right commands to add and manipulate rows and cells. When I load up your code sample, the links that trigger your addRow() functions do add cells to the table. What you're building is quite complex, and will take a lot of effort to get it working. It may seem like you're wasting time, but I encourage you to struggle through it.

It seems like you're on the right track. But may I suggest, instead of using nested tables, try manipulating the rowspan and colspan properties of those left-hand cells. That will produce the perfectly aligned as in your example JPG.

since you've given your cells names, like this:
var cell1 = document.createElement('TD');
you can change its properties like this:
cell1.rowspan = 2;
This will stretch the cell to span 2 rows

By the way, the link to your example JPG will probably be removed by a moderator, since external links to examples violates TOS#13 [webmasterworld.com].

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 8:42 am May 14, 2026