Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    May 2003
    Location
    Jewett City, CT
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Using parentNode in link to edit table row

    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
    Code:
    <!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>

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,028
    Thanks
    75
    Thanked 4,325 Times in 4,291 Posts
    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:
    Code:
    <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:
    Code:
    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
    Code:
    <a href="javascript:editDate(this.parentNode.rowIndex)">726&nbsp;&nbsp;Ohio</a>
    You could use
    Code:
    <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.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,028
    Thanks
    75
    Thanked 4,325 Times in 4,291 Posts
    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
    Code:
    <a href="javascript:editDate(this.parentNode.parentNode.rowIndex)">726&nbsp;&nbsp;Ohio</a>
    but why not play it safe?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •