...

View Full Version : Using parentNode in link to edit table row



chrscote
05-11-2009, 01:19 PM
I have been using parentNode to delete rows from a table when clicking a button using:

this.parentNode.parentNode.rowIndex
Now, I have another case where I want to determine the row number to edit the row. This time, however, I've decided to use a link on the first column of the row. Because I wasn't using a button, I assumed that I could simply remove one of the parentNode's in the function call. But when I click the link I am getting a javascript error saying the parentNode.rowIndex is null or not an object. Listed below is the code I'm using. It would be GREATLY appreciated if someone could please help me out here.

Chris

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Cable Editing Form</title>
<script type="text/javascript">
function editDate(rowID) {
//This function will edit the row so that the right column is given a text box
//to enter the install date in the row that is selected.
alert(rowID);
}
function addHull() {
var newHull, newHullName, date;
var newHullID;
if (document.getElementById("hull").value!="") {
newHullID = document.getElementById("hullDD").options[document.getElementById("hullDD").selectedIndex].value;
newHullName = document.getElementById("hull").value;
date = document.getElementById("date").value;
//alert("id="+newHullID+"; name="+newHullName);
document.getElementById("hullID").value=newHullID;
//newID = ajaxFunction("a");
var tableRef = document.getElementById('myTable');
var rowCount = tableRef.getElementsByTagName("TR").length-1;
var newRow = tableRef.insertRow(rowCount);
var newCell = newRow.insertCell(0);
var newText = document.createTextNode(newHullName);
newCell.appendChild(newText);
newCell = newRow.insertCell(1);
newText = document.createTextNode(date);
newCell.appendChild(newText);
//Now blank out drop-down and text box
document.getElementById("hullDD").selectedIndex = 0;
document.getElementById("hullDDmsg").innerHTML= "";
document.getElementById("date").value="";
}
}
</script>
</head>
<body>
<table border="0" id="myTable" width="180">
<tr>
<td><img src="trnsp.gif" width="120" height="1" border="0" /></td>
<td><img src="trnsp.gif" width="60" height="1" border="0" /></td>
</tr>
<tr>
<td colspan="2" align="center"><b>Hulls Impacted by this EC/SU</b></td>
</tr>
<tr>
<td align="center"><b><i>Hull</i></b></td>
<td><b><i>Install Date</i></b></td>
</tr>
<tr>
<td><a href="javascript:editDate(this.parentNode.rowIndex)">726&nbsp;&nbsp;Ohio</a></td>
<td>10/26/2006</td>
</tr>
<tr>
<td><a href="javascript:editDate(this.parentNode.rowIndex)">727&nbsp;&nbsp;Michigan</a></td>
<td>9/1/2007</td>
</tr>
<tr>
<td valign="bottom"><div style="border:1px solid #7F9DB9; width:95px;"><div id="hullDDmsg" style="display:inline;float:left" onclick="dispDD()"></div><img src="down.gif" onmouseup="this.src='down.gif'" onmousedown="this.src='downPress.gif'" onclick="dispDD()" height="16" width="15" align="right" />
</div>
<select id="hullDD" size="4" style="display:none;position:absolute;font-size:10pt;font-family:'Times New Roman';" onchange="changeDrop(this.options[this.selectedIndex].text);">
<option value=""></option><option value="5">726&nbsp;Ohio</option><option value="6">727&nbsp;Michigan</option><option value="7">728&nbsp;Florida</option><option value="8">729&nbsp;Georgia</option><option value="9">730&nbsp;Henry M. Jackson</option><option value="10">731&nbsp;Alabama</option><option value="11">732&nbsp;Alaska</option><option value="12">733&nbsp;Nevada</option><option value="13">734&nbsp;Tennessee</option><option value="14">735&nbsp;Pennsylvania</option><option value="15">736&nbsp;West Virginia</option><option value="16">737&nbsp;Kentucky</option><option value="17">738&nbsp;Maryland</option><option value="18">739&nbsp;Nebraska</option><option value="19">740&nbsp;Rhode Island</option><option value="20">741&nbsp;Maine</option><option value="21">742&nbsp;Wyoming</option><option value="22">743&nbsp;Louisiana</option><option value="28">PTP&nbsp;PTP Lab NUWC</option><option value="29">ITF&nbsp;ITF Lab NUWC</option><option value="30">TTF(B)&nbsp;TTF Lab Bangor</option><option value="33">TTF(KB)&nbsp;TTF Lab Kings Bay</option><option value="34">21&nbsp;Seawolf</option><option value="35">22&nbsp;Connecticut</option><option value="36">23&nbsp;Jimmy Carter</option>
</select></td>
<td valign="bottom"><input type="text" class="text" id="date" size="3" maxlength="10" />&nbsp;<input type="button" id="add" onclick="javascript:addHull()" value="+" /></td>
</tr>
</table>
</body>
</html>

Old Pedant
05-12-2009, 01:07 AM
You should never assume what the tree of nodes look like. HTML can and does put in extra nodes you don't know about. And I've even seen differences between browsers in what extra nodes will be added.

The easiest and surest thing to do is to "climb the tree" until you hit the type of object/tag you are looking for.

Example:


<html>
<head>
<script>
function zapthisrow(from)
{
var node = from;
while ( node != null )
{
if (node.tagName == "TR" )
{
alert("we could zap the TR with rowIndex " + node.rowIndex);
return;
}
node = node.parentNode;
}
}
</script>
</head>

<body>
<table border=1 cellpadding=20>
<tr>
<td><div><span onclick="zapthisrow(this);">click here</span></div></td>
<td> Stuff </td>
</tr>
<tr>
<td><div><span onclick="zapthisrow(this);">click here</span></div></td>
<td> Stuff </td>
</tr>
<tr>
<td><div><span onclick="zapthisrow(this);">click here</span></div></td>
<td> Stuff </td>
</tr>
<tr>
<td><div><span onclick="zapthisrow(this);">click here</span></div></td>
<td> Stuff </td>
</tr>
<tr>
<td><div><span onclick="zapthisrow(this);">click here</span></div></td>
<td> Stuff </td>
</tr>
</table>


For your code, maybe you could add a small function:


function parentByTag( node, tag )
{
while ( node != null )
{
if (node.tagName == tag ) return node.rowIndex;
node = node.parentNode;
}
return null; // or -1 or ???
}


And then, in place of


<a href="javascript:editDate(this.parentNode.rowIndex)">726&nbsp;&nbsp;Ohio</a>

You could use


<a href="javascript:editDate(parentByTag(this,'TR'))">726&nbsp;&nbsp;Ohio</a>

or something like that.

No? Just make sure that your editDate function can handle receiving a null argument (or -1 or whatever you use to indicate "not found")...though that should never happen.

Old Pedant
05-12-2009, 01:11 AM
LOL! Just realized that you *guaranteed* that this.parentNode could never have a rowIndex property!

this in your code is the <a> tag.

Its parent is the <td> tag!!!!

*PROBABLY* you could simply do


<a href="javascript:editDate(this.parentNode.parentNode.rowIndex)">726&nbsp;&nbsp;Ohio</a>

but why not play it safe?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum