無法使用Javascript中的“編輯”按鈕

Question

我正在創建一個“編輯”按鈕，它將編輯我的行中的數據。 問題是，如果我單擊多個編輯按鈕，則不符合要求。 僅當我單擊1個編輯按鈕時，它才合規。

這是我的示例： http : //jsfiddle.net/te2wF/31/

這里我的代碼

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;

        }
    }

感謝您的幫助.....

Answer 1

您應該更改： textgender.options.add(Option(gender)); 到textgender.options.add(new Option(gender));

但更重要的是編輯按鈕：

您正在嘗試通過ID訪問表上的可編輯輸入-但是，當您創建第二組文本名和文本輸入時，該ID與您要編輯的另一行相同。 您可能需要在這些元素上創建唯一的ID（可能是通過在ID后面附加行號），或者需要對其進行設置，以便一次只能編輯一行（當您將另一行禁用並變灰時，重新編輯一個）

Answer 2

請在使用jsfiddle時，請將JavaScript保留在javascript選項卡上，並將html保留在html選項卡上，以使其更加輕松快捷地為您提供幫助。

我相信您應該在代碼上調整2個位置：

第一

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

應該

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));

第二：

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

        }

應該：

        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;

        }

在這里嘗試http://jsfiddle.net/te2wF/31/