SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    97
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Trouble related to setting an attribute in a cloned table row

    The code below is an html page with some javascript that is designed to let a user add a row to a table. What I an trying to do here is to clone a row to get the basic format of the row, set an attribute in an input field in the row and insert it at the end of the group of rows in the table.

    It works great up to a point. In the newRow function, when the "+" is clicked the immediate row is cloned, the "value" attribute for the <input> tag is set and then the row is appended using appendChild().

    It works fine, setting the attribute to "input Name" except in one condition. If I have entered a new name in the input field of a row and then click on the "+" sign in that row, it adds a row but leaves the value attribute equal to the new value entered in the field. The row is contained in the "row" variable and when I inspect the value attribute of the row variable using "alert()" just before appending it, it shows the value to be "Input Name." Yet, the new row has the value entered into the input field.

    Can anyone help me figure out what is going on here?

    Code HTML4Strict:
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
     
    <title>Title</title>
     
    <style text/css>
     
    a {text-decoration: none}
     
    </style>
     
    <script type="text/javascript">
    function pn(){
    var idt = document.getElementsByTagName('tr');
    idt = idt[0].id;
    alert(idt);
    }
     
    function newRow(t){
    var parent = t.parentNode.parentNode.parentNode;
    var row = t.parentNode.parentNode.cloneNode(true);
    row.firstChild.nextSibling.firstChild.setAttribute('value','Input Name');
    alert('value = ' + row.firstChild.nextSibling.firstChild.getAttribute('value'));
    parent.appendChild(row);
    }
     
    function removeRow(t){
    var y = t.parentNode.parentNode;
    y.parentNode.removeChild(y);
    }
    </script>
     
    </head>
    <body>
     
    <table border="1" >
    <tr id="74" ><td><a href="#" onclick="newRow(this);" >+</a>&nbsp;&nbsp;&nbsp;<a href="#" onclick="removeRow(this);" >-</a>&nbsp;&nbsp;</td><td class="small" ><input type="text" value="Charles" ></td></tr>
    </table>
     
    </body>
    </html>

    Some addition curiosity:

    I am new to javascript, coming from php programming and am frustrated that I can't simply insert whatever html I want right where I want it but have to go through this baroque "node" process. "appendChild" seems like an extreme limitation when I want to insert new code following a set of siblings. I have to refer back to the parent and turn the siblings into children and append a new child. Why not just something like "insertAfterLastSibling()" or "insertAfter()"? There is an "insertBefore()" function available.

    And it is all programming in a black box as you can't really see the changes you have made except by observing their effects indirectly or displaying the generic information in an alert(). I'm curious why the changes javascript makes aren't reflected in the source code. It seems like an obvious way to make the process more accessible.

    Thanks for any help and answers to my questions.

    --Kenoli

  2. #2
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It looks like you're getting the value of the attribute in the HTML, rather than the contents of the element. Check out this post which attempts to explain it all for you. But basically, try using .value() instead and see what happens

    Quote Originally Posted by kenoli View Post
    Some addition curiosity:

    I am new to javascript, coming from php programming and am frustrated that I can't simply insert whatever html I want right where I want it but have to go through this baroque "node" process. "appendChild" seems like an extreme limitation when I want to insert new code following a set of siblings. I have to refer back to the parent and turn the siblings into children and append a new child. Why not just something like "insertAfterLastSibling()" or "insertAfter()"? There is an "insertBefore()" function available.
    I prefer to use jQuery, which makes such things so much easier. I can then use something like append() which will probably do what you're after

    And it is all programming in a black box as you can't really see the changes you have made except by observing their effects indirectly or displaying the generic information in an alert(). I'm curious why the changes javascript makes aren't reflected in the source code. It seems like an obvious way to make the process more accessible.
    Depending on which browser you're using, there's probably some tools out there which can help you out. For Chrome/Safari there's the webkit inspector and for Firefox there's Firebug, they're both brilliant tools and both will let you see what's what

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    97
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Clairs -- Thanks. I think your link spells it out. It amazes me that this language has become the official client side language.

    Weird . . .

    --Kenoli

    PS -- Looks like I will have to get into jquery and firebug. Should have earlier, I suppose. I have avoided frameworks in php as just one more thing to learn. But it sounds like jquery actually adds some missing functionality.


Bookmarks

Posting Permissions

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