Question

I want to get the parameter in my table (HTLML) table every time the user click edit button.
The table contains in each row an edit button like following:

 retour.append("<td>");

                           retour.append("<button  id=edit name=edit type=button  onClick= editarow()>");
                           retour.append("<img src=edit.gif />");
                           retour.append("</button>");
                           retour.append("</td>");

to get the value of each row where edit is clicked using javascript I do the following:

function  editarow(){
var table = document.getElementById("sheet");
    var buttons = table.getElementsByTagName("button");
       for(var i=0; i<buttons.length; i++) {
        if(buttons[i].name=="edit") {
            buttons[i].onclick = function() 
                {
                var buttonCell = this.parentNode; //cell
                var editThisRow = buttonCell.parentNode; //td
                var er=editThisRow.parentNode.attributes[1].value;
                alert(er);
                }

        }
      }

}

but I didn’t get the values expected.

Answer 1

Your have an error in your button element, this:

onClick= editarow()

should be

onclick='editarow()'

(The “C” should be lower case, and the function call in quotes.)

Let’s assume a row looks like this:

<tr>
    <td data-foo="bar">John</td>
    <td>Doe</td>
    <td>...your edit button...</td>
</tr>

In editarow, you can do this:

function editarow() {
    var row, firstNameCell, lastNameCell;

    // `this` is the button, so `this.parentNode` is the cell, and
    // `this.parentNode.parentNode` is the row
    row = this.parentNode.parentNode;

    // The first name cell is the first child
    firstNameCell = findElement(row.firstChild);

    // The second name cell is its next sibling
    lastNameCell = findElement(firstNameCell.nextSibling);

    // Their "values" are the text within them, most easily accessed via
    // `innerHTML`
    alert("First name is " + firstNameCell.innerHTML);
    alert("Last name is " + lastNameCell.innerHTML);

    // Or if you store data in attributes, you can get them via
    // `getAttribute`
    alert("data-foo = " + firstNameCell.getAttribute("data-foo"));
}

function findElement(node) {
    while (node && node.nodeType != 1) {
        node = node.nextSibling;
    }
    return node;
}

This is all made a lot easier if you use jQuery, Prototype, Closure, or other libraries. (For instance, the findElement function above is very crude; its purpose is to skip over text nodes and such.)