Question

我有一个JSP页面，其中将显示一个包含行的表的用户。如果用户愿意，他可以添加一个新行并按下保存按钮，该按钮会将数据插入到表中，这是通过JavaScript完成的。

我的要求是，用户添加一个新行并在其中输入详细信息。如果他单击重置按钮，它将清除在新行内输入的数据，但不会删除整个用户启动时显示的原始数据。

请帮帮我。

Answer 1

我相信你的问题分为两部分：首先，需要清除新行;其次，如果您使用AJAX更新服务器上的数据，请记住同步重置。

@ 321X说的是你只需要为每一行添加一个额外的属性就可以轻松清除它。当你添加一行时，我可能会建议使用唯一标识符将每个数据对象存储到另一个对象中，因此在重置时，您可以遍历每个项目并更新服务器（如果有必要）。这是一些粗略的js-pseudo-esk代码（$ === jQuery）：

var newRowsList = {};

$('.addRow').click(function( ev ) {
    var newRow = {};
    // populate newRow with user-data and add it to the master list
    newRowList[ /* uid */ ] = newRow;
    // if you are using AJAX to sync row-by-row changes:
    $.ajax({
        // url, post, etc...
        success : function() {
            // now generate the DOM elements however you want
            // add the new row to the table
            $( /* row data */ ).appendTo( '#dataTable' );
        }
    });
});

$('#resetTable').click(function( ev ) {
    for ( var i in newRowsList ) (function( item, data ) {
        $.ajax({
            // url, post, etc...
            success : function() {
                // destroy the row by using the uid passed in
                $( '.' + item ).remove();
                // and remove the item from the list
                newRowsList[ item ] = null;
            }
        });
    })( i, newRowsList[ i ]);
});

不漂亮，但希望它解释了这一点。根据需要的高级程度，您可以将删除的项目添加到序列列表中，这样，如果用户意外点击了重置按钮，则可以恢复更改。

Answer 2

您可以检测到什么是新的，什么不是。

有几种方法可以做到这一点。当然可以使用jQuery或其他javascript库。

在jsFiddle上查看我的jQuery示例：http://jsfiddle.net/Xvm9L/

我在新行中添加了一个额外的属性。删除isnew属性为true的行。单击“新建行”按钮时，应将此属性添加到行中。

这是一个适用于普通javascript的版本： http://jsfiddle.net/Xvm9L/1/

如何通过javaScript回滚动作？

2 个答案: