不使用Javascript中的编辑按钮

我正在创建一个编辑按钮，用于编辑我所在行中的数据。问题是，如果我单击多个编辑按钮，它将不符合要求。 仅当我单击1编辑按钮时，它才符合要求

以下是我的例子：

这是我的代码

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;

        }
    }

感谢您的帮助……

您应该更改：

textgender.options.add（Option（gender））
到
textgender.options.add（新选项（性别））

但在“编辑”按钮上有更多要点：

您正试图通过id访问表上的可编辑输入，但当您创建第二组textname和textage输入时，id与您正在编辑的另一行相同。您需要在这些元素上创建唯一的id（可能是通过将行号附加到id中），或者需要设置它，以便一次只能编辑一行（编辑一行时禁用其他行并使其变灰）
请在使用JSFIDLE时，请在javascript选项卡上保留javascript，在html选项卡上保留html，以便更轻松、更快地帮助您

我认为您应该调整代码中的两个位置：

首先

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;

        }

请尝试此处
乍一看，您似乎正在为多个元素分配相同的id。这可能会产生意想不到的行为。嗨，凯文，我对在id后面加上行号感到很困惑？你这是什么意思？再次感谢您的回复这只是一个技巧，可以确保第3行的textname输入元素的id与第5行的textname输入元素的id不同。所以，
textname.id=“textname”+i
就可以了。您也不应该使用带有“uid”标记的元素作为全局元素，而是在单击“保存”时从
此
元素中提取更新的rowID，就像在单击编辑按钮时一样。我建议在Chrome中使用javascript调试器来提供帮助——这是非常宝贵的！我使用textname.id=“textname”+I尝试了您的建议，但没有效果，因为当我单击编辑按钮时，什么都没有发生。顺便说一下，我用的是FF。再次感谢Kevin的回复-您必须更改逻辑中的其他内容以使其正常工作（例如，您需要修改任何与getElementByID（“textname”）相关的内容）-但对于这样一个简单的例子，您可能更容易看到它的实际应用。我已经一年没有使用FF了-但Chrome是一个快速下载，并且开发工具已经集成在其中-因此您不仅可以交互式地调试应用程序，还可以动态地检查和编辑DOM元素。