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

【问题标题】：Javascript inline edit, how to cancel edit to have original data?Javascript内联编辑，如何取消编辑以获得原始数据？
【发布时间】：2010-11-02 21:25:45
【问题描述】：

我有数据

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

然后在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>
}

在 editRow 函数中，我执行了一些 ajax 并检索 TD 并替换 [$(row_id).html(html)] 行的 TD。这一切都很好。但我需要有一个取消按钮，点击它会带回原来的 TD（即 .. 没有输入框）。任何想法，如何实现这个功能？我是否需要将之前的编辑行 html 复制到变量中，然后再取消替换输入框 html？感谢您的帮助。

编辑

另外，如果用户点击页面上的其他地方，它应该将其视为取消并带回原始数据。这个action怎么绑定？

【问题讨论】：

你在使用 jQuery 吗？我看到您以 $() 调用为例，但没有提及框架，也没有 jquery 标记...
用一些可能对你有帮助的代码编辑了我的答案。

标签： javascript jquery inline-editing

【解决方案1】：

首先 - 研究 Javascript 框架。您正在谈论的那种功能已经足够先进，如果您真的希望您的代码在所有浏览器中正确工作，您不应该自己这样做。它还可以让你的 HTML 没有丑陋的内联 Javascript 等，这被认为是不好的做法。话虽如此，这里有一个想法：

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

编辑

Here's some code to get you started:

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 插件可以为你做很多这样的事情，根据你的应用程序的需要，你最好每次只获取行，而不是获取它们，等等。这只是一个粗略的想法，你可能需要做些什么来实现你想要的，其余的取决于你。 :)

【讨论】：

嗯 .. @Paolo .. 这不是一个坏主意.. 但它只会使页面上的行数增加一倍.. 因此页面大小也会增加。不是问题，但我会等待其他解决方案，然后再实施这一点。关于框架，我在 javascript 方面不是很有经验 .. 并且考虑到自定义要求，我认为我的基本流程如上所述。谢谢。
我知道它会增加页面大小，我可以发誓我为此添加了注释。无论如何，我的大多数应用程序中都有分页，因此一个页面中的行数不超过 50 行，而 100 行真的没什么大不了的。如果你愿意，我可以做一些事情来保持你的状态，但我会使用 jQuery，否则它太让人头疼了。 :)
@Paolo.. 是的，我确实阅读了您关于 html 的说明。无论如何，我也使用 Jquery。如果您可以阐明如何使用 Jquery 进行操作，那将非常有帮助。谢谢。
另一个想法是，当您加载编辑行时，您可以简单地隐藏原始行，直接在它之后/之前添加一个新行，然后在加载编辑行时显示原始行，而不是覆盖原始行编辑完成。
是的，在您回答有关隐藏行的问题后，我在想这样的事情。我没有加载和替换 TD，而是隐藏并加载了一个新行。如果有任何“更好”的方法，请帮助我知道。

【解决方案2】：

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

【讨论】：