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

点击＆＃34;保存＆＃34;按钮，您的代码正在尝试更改＆＃34; textarea＆＃34; html $("textarea[name=expiration_date]")

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

Answer 2

Here's a JSFiddle that demonstrates what you seemed to be asking about

如果在运行原始示例代码时检查HTML元素，您应该注意到，当您第一次单击＆＃34;编辑＆＃34时，代码实际上并未删除<td>元素;按钮;它在其中插入 <textarea>元素。

我的示例代码中的一个重要区别是，我将jQuery function html替换为the jQuery function replaceWith替换为html函数（根据我刚刚链接的文档）：

获取匹配元素集中第一个元素的HTML 内容，或者设置每个匹配元素的HTML 内容。＆＃34; [强调我的]

我还添加了代码，用于在textarea和td元素被替换之前保存现有内容，以便新元素的内容可以是使用与替换元素相同的值进行更新。

这里是来自JSFiddle的完整JavaScript：

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

function on_edit_button_click()
{
    if(App.editing_list)
    {
        var $textArea = $("textarea[name=expiration_date]");
        var currentValue = $textArea.val();
        console.debug(currentValue);
        $textArea.replaceWith(App.normal_html);
        $("td[name=expiration_date]").html(currentValue);
        $(this).html("edit");
        App.editing_list = false;
    }
    else
    {
        var $td = $("td[name=expiration_date]");
        var currentValue = $td.html();
        console.debug(currentValue);
        $td.replaceWith(App.editing_html);
        $("textarea[name=expiration_date]").html(currentValue);
        $(this).html("save");
        App.editing_list = true;
    }
}

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

请注意，我还从您的示例中删除了init();函数调用，因为它未在代码中的其他位置定义。

我还更改了editing_html和normal_html HTML的内容，但这些内容永远不可见（因为它们已被替换）。

无法使用javascript删除文本字段

2 个答案: