Javascript内联编辑，如何取消编辑以获得原始数据？

Question

有数据，

<tr id="row_1">
  <td id="td_1_1">Text 1</td>
  <td id="td_2_1">Text 2</td>
  <td><a href="#" onclick="editRow(1)">Edit row</a></td> 
</tr>

然后我在 editRow 函数中的 javascript 中

function editRow(row_id) {
   //some ajax to retrieve html in the format
   //<td><input type="text" name="td_1" value="Text 1"></td>
   //<td><input type="text" name="td_2" value="Text 2"></td>
   //<td><input type="submit" name="submit" value="submit"></td>
}

我执行一些 ajax 并检索 TD 并替换 [$(row_id).html(html)] 该行的 TD。 这一切都运行良好。 但我需要一个取消按钮，单击该按钮即可恢复原始 TD（即..没有输入框）。 有什么想法，如何实现这个功能？ 我是否需要将编辑前的行 html 复制到变量，然后取消替换输入框 html？ 感谢您的帮助。

编辑

此外，如果用户单击页面上的其他位置，它应该将其视为取消并带回原始数据。 如何绑定这个动作呢？

Answer 1

首先 - 研究 Javascript 框架。 您所讨论的功能类型足够先进，如果您确实希望您的代码在所有浏览器中都能正常工作，那么您不应该自己执行此操作。 它还可以让你的 HTML 远离丑陋的内联 Javascript 等，这被认为是不好的做法。话虽这么说，这里有一个想法：

你是否考虑过每个项目有两行，其中一行处于“编辑模式”，另一行处于“编辑模式” “正常模式”下的行？ 您可以将“编辑模式”行设置为默认隐藏，当有人单击编辑链接时，您可以隐藏该行并使编辑行进入视图。 这确实比通过 AJAX 调用来获取编辑表单更容易。

编辑

这里有一些代码可以帮助您开始：

function editRow(row_id, callback) {
   // you would get this dynamically through ajax, thus why we need the callback
   var html = '<tr id="edit_' + row_id + '" class="edit"><td><input type="text" name="td_1" value="Text 1"></td><td><input type="text" name="td_2" value="Text 2"></td><td><input type="submit" name="submit" value="submit"></td></tr>';
   callback(html);
}

$('a.edit', '#data').click(function() {
    var $tr = $(this).closest('tr');
    var id = $tr.attr('id').split('_').pop();
    var edit_row = '#edit_' + id;
    if($(edit_row).length == 1) { // edit row already exists
        $tr.hide();
        $(edit_row).show();
    } else { // doesn't exist, fetch it
        editRow(id, function(html) {
            $tr.hide();
            $tr.after(html);
        });
    }
    return false;
});

$(window).click(function(e) {
    $('tr.edit:visible').each(function() {
        var $tr = $(e.target).closest('tr');
        var id = $(this).attr('id').split('_').pop();
        console.log(e.target, $tr, this);
        if($tr.attr('id') != this.id) {
            $(this).hide();
            $('#row_' + id).show();
        }
    });
});

我可能应该注意到有一个很多 jQuery 插件可以为你做很多这样的事情，根据你的应用程序的需要，你可能最好每次都获取行，而不是根本不获取它们，等等。这只是你的一个粗略想法可能需要做一些事情才能实现你想要的，剩下的就取决于你了。 :)

Answer 2

我认为要使用 jQuery 获得初始功能，您可以查看 jEditable 插件。 这是一个非常实用的插件，允许您单击一些文本并创建可编辑区域并取消等。我假设一旦用户单击“确定”或“保存”，您就不需要恢复到原始状态，这是唯一的中间编辑是一个问题。 jEditable 负责处理这个问题。