asked on

Urgent Need help

Hello

I need to add rows dynamically using javascript. My current code copies entrire first row. it is creating problems. I need java script to generate the code like this way. how my current javascript can be modifled. please advice me

current javascript
--------------------------

function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {

var newcell = row.insertCell(i);

newcell.innerHTML = table.rows[0].cells[i].innerHTML;

//alert(newcell.childNodes);
switch(newcell.childNodes[0].type) {

case "checkbox":
newcell.childNodes[0].checked = false;
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
break;
}
}
}

generated code :
--------------------------

<input type="button" value="Add Associated Cases"
onclick="addRow('dataTable')" id="addCases"/>

<input type="button" value="Delete Associated Cases "
onclick="deleteRow('dataTable')"/>

<br/>
<br/>
<table id="dataTable" width="350px" border="0">

<tr>

<TD><input type="text" name="cases[0].agencyCaseNumber" value=""></TD>

<TD><input type="text" name="cases[0].caseStatusId" value=""></TD>
</tr>

<tr>

<TD><input type="text" name="cases[0].agencyCaseNumber" value=""></TD>

<TD><input type="text" name="cases[0].caseStatusId" value=""></TD>
</tr>

</table>

required code to be generated
------------------------------------------

<input type="button" value="Add Associated Cases"
onclick="addRow('dataTable')" id="addCases"/>

<input type="button" value="Delete Associated Cases "
onclick="deleteRow('dataTable')"/>

<br/>
<br/>
<table id="dataTable" width="350px" border="0">

<tr>

<TD><input type="text" name="cases[0].agencyCaseNumber" value=""></TD>

<TD><input type="text" name="cases[0].caseStatusId" value=""></TD>
</tr>

<tr>

<TD><input type="text" name="cases[1].agencyCaseNumber" value=""></TD>

<TD><input type="text" name="cases[1].caseStatusId" value=""></TD>
</tr>

</table>

thanks

numberkruncher

The PrototypeJS framework would probably make things much simpler here (and probably more reliable due to severe memory related problems in IE that occur when dynamically adding or removing content).

I think that the following should achieve what you need. Please note that "prototype.js" is an open-source file and the associated website is: http://prototypejs.org/

Download PrototypeJS script from: http://prototypejs.org/assets/2009/8/31/prototype.js

I strongly recommend that you take a further look into what PrototypeJS can do for you, because it makes so many things much simpler, AND cross-browser friendly!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>Demo Page</title>
		<script type="text/javascript" src="prototype.js"></script>
		<script type="text/javascript">
			function addRow(tableId) {
				var body = $(tableId).select('tbody')[0];
				var newId = body.childElements().length;
				
				var row = new Element('tr'), agencyCaseNumber, caseStatusId;
				body.appendChild(row);

				row.appendChild(agencyCaseNumber = new Element('td'));
				agencyCaseNumber.appendChild(new Element("input", {
						type: "text",
						name: "cases[" + newId + "].agencyCaseNumber",
						value: ""
					}));

				row.appendChild(caseStatusId = new Element('td'));
				caseStatusId.appendChild(new Element("input", {
						type: "text",
						name: "cases[" + newId + "].caseStatusId",
						value: ""
					}));
			}
		</script>
	</head>
	<body>
		<h1>Demo Page</h1>
		<div>
			<input type="button" value="Add Associated Cases" onclick="addRow('dataTable');" id="addCases"/>
			<br/>
			<br/>
			<table id="dataTable" width="350px" border="0">
				<tr>
					<td>
						<input type="text" name="cases[0].agencyCaseNumber" value=""/>
					</td>
					<td>
						<input type="text" name="cases[0].caseStatusId" value=""/>
					</td>
				</tr>
			</table>
		</div>
	</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

leakim971

Thanks for the points! Happy new year!