javascript - 无法使用 JavaScript 删除文本字段

Question

我有一个网页，其中包含不同数据条目的列表。包含条目的每行显示多个值，并在行末尾有一个编辑按钮。现在我只是想构建编辑每一行的功能。

我想要发生的是，当用户单击编辑按钮时，按钮所在行中的几个字段变成可编辑文本字段。当用户再次单击该按钮(其名称现已更改为“保存”)时，文本字段将再次变为不可编辑的文本。

我已经掌握了该工作的第一部分。但是，当我尝试将文本字段转换为常规文本时，文本字段仍然存在，并且其中的文本消失。这是我的 JavaScript 代码:

var App = 
    {
        editing_list: false,
        default_text: 'hello world!',
        edit_element: null,
        editing_html: 
            "<textarea name= \"expiration_date\">list expiration date</textarea>",
        normal_html: 
            "<td name= \"expiration_date\">list expiration date</td>",
    };

function on_edit_button_click()
{
    if(App.editing_list)
    {
        $("textarea[name=expiration_date]").html(App.normal_html);
        $(this).html("edit");

        App.editing_list = false;
    }
    else
    {
        $("td[name=expiration_date]").html(App.editing_html);
        $(this).html("save");

        App.editing_list = true;
    }
}

$(document).ready(function()
{
    init();
    $('button').click(on_edit_button_click);
});

function init()
{
    App.edit_element = $("td[name=expiration_date]");
    console.log(App.edit_element);
}

这是我的 HTML 代码:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>

<table style="width:300px">
    <tr name="list_*id*_row">
        <td name="list_name">list name</td>
        <td name="expiration_date">list expiration date</td>
        <td><button> edit </button></td>
    </tr>
</table>

Answer 1

当您点击“保存”按钮时，您的代码会尝试更改“textarea”html $("textarea[name=expiration_date]")

将其更改为表格单元格$("td[name=expiration_date]")，它应该可以工作。