无法使用Javascript中的“编辑”按钮

Question

I'm Creating an Edit button that will edit my data in my row. the problem is if I click multiple edit button it doesn't comply. It only complies when I click 1 edit button.

HERE IS MY EXAMPLE : http://jsfiddle.net/te2wF/31/

HERES MY CODE

function editRow(t)
{
        var i = t.parentNode.parentNode.rowIndex;
        var table = document.getElementById('myTable');

        if (  table.rows[i].cells[3].childNodes[0].value =="Edit")
        {
            var name = table.rows[i].cells[0].innerHTML;
            var age = table.rows[i].cells[1].innerHTML;
            var gender = table.rows[i].cells[2].innerHTML;
            var tname = table.rows[i].cells[0];
            var tage = table.rows[i].cells[1];
            var tgender = table.rows[i].cells[2];

            tname.innerHTML = "";
            var textname = document.createElement("input");
            textname.id = "textname";
            tname.appendChild(textname);

            tage.innerHTML = "";
            var textage = document.createElement("input");
            textage.id = "textage";
            tage.appendChild(textage);
            tgender.innerHTML = "";
            var textgender = document.createElement("select");
            textgender.id = "textgender";
            tgender.appendChild(textgender);

            document.getElementById('textname').focus();
            document.getElementById("uid").innerHTML = i;
            document.getElementById("textname").value = name;
            document.getElementById("textage").value = age;
             textgender.options.add(Option(gender));

            if(gender == "Male")    textgender.options.add(new Option("Female"));
            else                    textgender.options.add(new Option("Male"));


            table.rows[i].cells[3].childNodes[0].value="Save"
            document.getElementById("name").disabled = true;
            document.getElementById("age").disabled = true;
            document.getElementById("gender").disabled = true;
            document.getElementById("insert").disabled = true;
        }
        else
        {
            update(document.getElementById('uid').innerHTML);
            table.rows[i].cells[3].childNodes[0].value="Edit"
            document.getElementById("insert").disabled = false;

        }
    }

Thank you for helping.....

Answer 1

you should change: textgender.options.add(Option(gender)); to textgender.options.add(new Option(gender));

But more to the point on the edit button:

You're attempting to access the editable inputs on your table by id - but when you create a second set of textname and textage inputs, the id's are the same as the other row that you're editing. You either need to create unique id's on these elements (perhaps by appending the row number to the id), or you need to set it up so that you can only edit one row at a time (disable and grey the other rows when you're editing one)

Answer 2

Please, when using jsfiddle, please keep javascript on javascript tab and html on html tab to make it easier and faster to help you.

I believe you should adjust 2 places on your code:

First

document.getElementById('textname').focus();
document.getElementById("uid").innerHTML = i;
document.getElementById("textname").value = name;
document.getElementById("textage").value = age;
textgender.options.add(Option(gender));

should be

document.getElementById('textname').focus();
document.getElementById("uid").innerHTML = i;
document.getElementById("textname").value = name;
document.getElementById("textage").value = age;
textgender.options.add(new Option(gender));

Second:

        else
        {
            update(document.getElementById('uid').innerHTML);
            table.rows[i].cells[3].childNodes[0].value="Edit"
            document.getElementById("insert").disabled = false;

        }

should be:

        else
        {
            update(document.getElementById('uid').innerHTML);
            table.rows[i].cells[3].childNodes[0].value="Edit"
            document.getElementById("name").disabled = false;
            document.getElementById("age").disabled = false;
            document.getElementById("gender").disabled = false;                
            document.getElementById("insert").disabled = false;

        }

try here http://jsfiddle.net/te2wF/31/