Javascript coding problem

Hockeyfan · 02-01-2006, 01:01 AM

Hello All,

I am new to javascript. I have written code in the Java programming language so I am familiar with object oriented programming. Now here is my problem. I have written a Javascript function that is soppose to add a table row between two table rows. The function outputs the information as a third table cell rather then a new table row. THe code is shown below:

Code:

<html>
	<head>
	<title>Test</title>
	<script language="javascript">
	function addRow ()
	{
		var newtr = document.createElement("tr");
		var newtd1 = document.createElement("td");
		var newtd2 = document.createElement("td");
		var newinput = document.createElement("input");
		var otherText = document.createTextNode("Other");
		newtd1.appendChild(otherText);
		newinput.setAttribute("type", "text");
		newinput.setAttribute("name", "other");
		newinput.setAttribute("size", "20");
		
		newtd2.appendChild(newinput);
		newtr.appendChild(newtd1);
		newtr.appendChild(newtd2);
		var currTR = document.getElementById("curr");
		var stopPlace = currTR.getElementsByTagName("tr").item(0);
		
		currTR.insertBefore(newtr,stopPlace);
	}
	</script>
	</head>
	
	<body>
	
	<table border="1">
		<tr id="curr" >
			<td align="left">Type of Equipment</td>
			<td align="left">&nbsp;
		 	  <select name="equipment" size="1"><!-- id="equip" onChange="getEquipment()">-->
		        <option value="treadmill">Treadmil</option>
		        <option value="exercise bike">Exercise Bike</option>
		        <option value="other">Other</option>
		        <option value="rowing machine" selected="selected">Rowing Machine</option>
		      </select></td>
		</tr>
		<tr>
			<td align="left">Brand</td>
			<td align="left">&nbsp;&nbsp;<input type="text" name="brand" size="20"></td>
		</tr>
	</table>
	
	<br><input type="button" value="Add Row" onclick="addRow();">
	
	</body>
</html>

If anyone can tell me what I am doing wrong please let me know

Hockeyfan

Spudley · 02-01-2006, 07:23 AM

The code you've provided ought to be fine (I haven't bug checked it, but it looks okay), but sadly adding rows to a table is notoriously problematic. There are various methods of doing it, but most of them fail to work in at least one of the major browsers. Some browsers are happiest if you simply use innerHTML to append your new rows; others prefer object model code, as you've written; and others just don't like changing a table at all once it's been displayed. You didn't say which browser you're using, but if you're doing this sort of thing it's a good plan to test in as many as possible anyway.

If you're dealing with a known list of items that can be added an removed, my advice would be simply to build the table with them all already in place, but the ones you don't want to display set to invisible using Javascript to change their CSS style. It is a lot simpler to manage that way.

On the other hand, if you're dealing with adding an unknown number of items to the table, you may have to take a different approach. You might try using <div>s and CSS to simulate the table layout, which will make it a lot easier to manipulate in javascript, but harder to get right in terms of layout, or you could simply rebuild the entire table each time you need to add or remove a row. You could also write browser-specific code to make the table work right for whichever browser is being used, but with users spoofing other browsers, etc, that's not really my preferred solution. There are a few other options you could try, but in the end, whatever approach you decide, it isn't going to be as simple as it should be.