[thelist] dynamically removing a row with the DOM

Tom Dell'Aringa pixelmech at yahoo.com
Mon Feb 24 09:29:01 CST 2003


Hi,

I have a script where I dynamically add a table row using the DOM,
and it works nicely. The problem is removing the row as well. I have
looked into this, and the removeChild() method is apparently the way
to go.

However, I have had lots of trouble getting anything to work with
this. Has anyone worked with this method on a table, or does anyone
have this type of example? I have looked at PPKs page on the DOM and
reviewed his examples of removing child nodes, and even his example
works half the time and throws exceptions half the time.

I'm just wondering if this is doable. This actually only has to work
in IE. Below is my code to date. TIA

Tom
====================================================
<html><head>
<script language="Javascript" type="text/javascript">
/**********************************************************************/
/* Add Table Row:                             02/19/2003 Tom
Dell'Aringa
/  Adds a single row when button is clicked to table using the DOM
/  Pass the TBODY and table ID as parameters
/  **NOTE: field.maxlength appears to not function
***********************************************************************/

function addRow(bodyName, tableName, field1, field2, field3, field4,
prefix)
{
	docBody = document.getElementById(bodyName);
	tableName = document.getElementById(tableName);
	newRow = document.createElement("TR");

	//get number of rows
	rowNum = tableName.getElementsByTagName("TR");
	rowNum = (rowNum.length - 2) + 1;

	for (i = 0; i < 4; i++)
	{
		cell = document.createElement("TD");
		switch(i)
		{
			case 0:
			field = document.createElement("INPUT");
			field.type = "text";
			field.size = 25;
			field.id = field1+ "_" + rowNum;
			field.name = field1+ "_" + rowNum;
			break;

			case 1:
			field = document.createElement("INPUT");
			field.type = "text";
			field.size = 10;
			field.id = field2+ "_" + rowNum;
			field.name = field2+ "_" + rowNum;
			break;

			case 2:
			field = document.createElement("INPUT");
			field.type = "text";
			field.size = 10;
			field.id = field3+ "_" + rowNum;
			field.name = field3+ "_" + rowNum;
			break;

			case 3:
			field = document.createElement("SELECT");
			option = document.createElement("OPTION");
			option.value = prefix + "Pay";
			option.text = "Default";
			field.add(option);
			option = document.createElement("OPTION");
			option.value = prefix + "Leave";
			option.text = "Other";
			field.add(option);
			field.id = field4+ "_" + rowNum;
			field.name = field4+ "_" + rowNum;
			break;
		}
		cell.appendChild(field)
		newRow.appendChild(cell)
	}
	rowNum += 1;
	docBody.appendChild(newRow)
}

function removeRow(bodyName, tableName)
{
	docBody = document.getElementById(bodyName);
	tableName = document.getElementById(tableName);
	//get rows
	rows = tableName.getElementsByTagName("TR");
	len = rows.length;

	par = rows[0].parentNode();
	par.removeChild(par.childNodes[0])
}
</script>
</head>

<body>

<a href="#" onClick="removeRow('mortBody', 'mort')">test the remove
function</a>

<h2 class="pageTitle">Table</h2>

<table border="0" cellpadding="4" cellspacing="0" id="mort">
<tbody id="mortBody">
<tr class="blueTableHead">
	<td colspan="3"><h3>Title</h3></td>
	<td align="right"><input type="button" onclick="addRow('mortBody',
'mort', 'moreLien', 'morBal', 'morPay', 'morStatus', 'mor', 1);"
name="add" value="Add" /></td>
</tr>
<tr>
	<td>Field</td>
	<td>Field</td>
	<td>Field</td>
	<td>Field</td>
</tr>
<tr>
	<td><input type="text" name="morLien_1" size="25" /></td>
	<td><input type="text" name="morBal_1" size="10" /></td>
	<td><input type="text" name="morPay_1" size="10" /></td>
	<td><select name="morStatus_1">
	<option selected="selected" name="morePay">Default</option>
	<option value="morLeave">Other</option>
	</select></td>

</tr>
</tbody>
</table>

</body>
</html>



=====
>^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
http://www.pixelmech.com/
var me = tom.pixelmech.webDeveloper();

http://www.maccaws.com/
[Making A Commercial Case for Adopting Web Standards]

__________________________________________________
Do you Yahoo!?
Yahoo! Tax Center - forms, calculators, tips, more
http://taxes.yahoo.com/



More information about the thelist mailing list