Using parentNode in link to edit table row [Archive]

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  Ohio</a></td>
<td>10/26/2006</td>
</tr>
<tr>
<td><a href="javascript:editDate(this.parentNode.rowIndex)">727  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 Ohio</option><option value="6">727 Michigan</option><option value="7">728 Florida</option><option value="8">729 Georgia</option><option value="9">730 Henry M. Jackson</option><option value="10">731 Alabama</option><option value="11">732 Alaska</option><option value="12">733 Nevada</option><option value="13">734 Tennessee</option><option value="14">735 Pennsylvania</option><option value="15">736 West Virginia</option><option value="16">737 Kentucky</option><option value="17">738 Maryland</option><option value="18">739 Nebraska</option><option value="19">740 Rhode Island</option><option value="20">741 Maine</option><option value="21">742 Wyoming</option><option value="22">743 Louisiana</option><option value="28">PTP PTP Lab NUWC</option><option value="29">ITF ITF Lab NUWC</option><option value="30">TTF(B) TTF Lab Bangor</option><option value="33">TTF(KB) TTF Lab Kings Bay</option><option value="34">21 Seawolf</option><option value="35">22 Connecticut</option><option value="36">23 Jimmy Carter</option>
</select></td>
<td valign="bottom"><input type="text" class="text" id="date" size="3" maxlength="10" /> <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  Ohio</a>

You could use

<a href="javascript:editDate(parentByTag(this,'TR'))">726  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.