7

我有一个页面，我在表格中显示数据。
在每个表中，我都有一个列checkbox，如果是checked用户可以通过 Javascript 修改特定行。
这是因为它td封装了 aninput或 aselect并且我使这些对用户来说是可编辑的。
用户修改该行并按保存并保存更改。到目前为止还可以。
我的问题是如何实现cancel？
用户可以选择许多行，即复选框并修改它们，但用户也可以按取消。取消时应显示原始值（并且行再次变为不可编辑）。
但是 Javascript 中的取消操作是如何实现的呢？我们是否将数据存储在一些全局数据结构中？在 Javascript 中这会是什么？

4

4 回答 4

1

好的，在添加您提供的信息后，我建议您设置以下机制：

function getDatas() {
var oXhr;

    //get datas from database:
    oXhr = new XMLHttpRequest();    
    oXhr.onreadystatechange = function() {
    if (oXhr.readyState == 4 && (oXhr.status == 200)) {
        g_oData = (new DOMParser()).parseFromString(oXhr.responseText, "text/xml");
        }
    }

    oXhr.open("POST", "yourphpscriptthatreturnsthexmldatas.php", true);
    oXhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=utf-8");
    oXhr.send();
}

function populateGrid() {
    //use g_oData to populate your grid, but at first totally clean the body
    var mygrid = document.getElementById("mygridid");
    //mygrid.innerHtml = "<table><tr><td>...</td></tr></table>";

    //use the xml library to parse g_oData and fill up the table:
    var xmlRows = g_oData.getElementsByTagName("TAG");
    var xmlRow;
    iLen = xmlRows.length;
    for (var i=0;i<iLen;i++) {
    xmlRow = xmlRows[i];
    //use xmlRow->textContent to build each cell of your table
    }
}

function revertChange() {
    //on cancel, revert the changes by populating the grid. 
    //it will use the global xml/json object loaded directly from database, to refill everything.
    populateGrid();
}

我自己做了很多次来刷新页面中的一些数据。这基本上就是您正在做的事情，除了您没有向数据库请求任何内容，您只需重新填写字段。

于 2013-06-03T19:52:24.363 回答
1

这是一个非常简单的方法：

不要用表单元素替换单元格内容。将值（文本）保留在span元素中，并在显示表单元素时将其隐藏。然后你不必在取消时做任何事情。只需span再次显示并隐藏或删除表单元素。仅span在用户想要保存值时更新。

这是一个例子。显示和隐藏都是用 CSS 完成的。

<tr>
    <td>
        <span>value</span>
        <input type='text' value='' />
    </td>
    <td>
       <button class="save">Save</button>
       <button class="revert">Revert</button>
    </td>
</tr>

JS：

var rows = document.querySelectorAll('table tr');

for(var i = 0, l = rows.length; i < l; i++) {
    rows[i].addEventListener('click', function(event) {
        // all value display elements in the row
        var spans = this.querySelectorAll('span');
        // all form elements in the row
        var inputs = this.querySelectorAll('input');

        // handle click on save button
        if (event.target.className === 'save') {
            [].forEach.call(inputs, function(input, i) {
                spans[i].innerHTML = input.value;
            });
            this.className = '';
        }
        // handle click on revert button
        else if (event.target.className === 'revert') {
             // not much to do
             this.className = '';
        }
        else {
            // update form element values
            [].forEach.call(inputs, function(input, i) {
                input.value = spans[i].innerHTML;
            });
             this.className = 'edit';
        }
    });
}

演示

于 2013-06-03T20:28:47.257 回答
1

您只需访问value输入的原始属性即可获取defaultValue. 示例实现：

$("table").on("dblclick", "td", function(e) {
    var val = $(this).html();
    $(this).empty().append($("<form/>").append(
        $("<input/>", {type:"text"}).attr("value", val),
        //                           ^^^^
        // set the *attribute*, as if it was present in the parsed HTML
        $("<button/>", {type:"reset"}).text("Reset"),
        $("<button/>", {type:"button", class:"cancel"}).text("Cancel"),
        $("<button/>", {type:"submit"}).text("Submit")
    ));
}).on("submit", "form", function(e) {
    var val = $(this).find("input:text").val();
    //                                   ^^^^^
    // which is equivalent to .prop("value")

    /* then do something with val, e.g. send it to server via ajax */
    $(this).parent().html(val);
    e.preventDefault();
}).on("click", "button.cancel", function(e) {
    var $form = $(this).parent(),
        $input = $form.find("input:text"),
        oldval = $input.attr("value");
    //                  ^^^^^^^^^^^^^
    // or .prop("defaultValue"), but not .val()!
    if (oldval == $input.val() || confirm("Do you really want to discard your changes?"))
        $(this).parent().html(oldval);
    e.preventDefault();
});

（在 jsfiddle.net 上的演示）

一个可能更简单的解决方案可能是使用 dblclick-handler 将表单创建为闭包，并将原始 html 存储在本地变量中。

于 2013-06-03T20:55:59.470 回答
1

您可以使用HTML5data-属性来实现还原功能。这样，如果使用按钮，每个都<input>将保留其原始值。revert

这是它的外观：

<table>
  <tr>
     <td><input type='text' value='change me' data-original='change me' /></td>
     <td><input type='text' value='change me2' data-original='change me2' /></td>
     <td><input type='button' value='revert' onclick='revert(this)'/></td>
  </tr>
<table>

以及恢复的代码：

function revert(btn) {
    var parentTr = btn.parentNode.parentNode;
    var inputs = parentTr.getElementsByTagName('input');
    for(var i = 0; i < inputs.length; i++) {
        if (inputs[i].type == 'text') {
            inputs[i].value = inputs[i].getAttribute('data-original');
        }
    }
}

data-original可以生成属性：


作为一个侧面解决方案，您可以将原始值存储在一个map对象中。这是 (3) 演示（注意我添加了idfor each input，因此它可以用作 的键map）。

但请记住，解决方案 (2) 或 (3) 都不需要更改服务器端代码（假设您的输入具有 id 的 3）。并且（2）感觉更清晰。

关于defaultValue属性：属性只有在要恢复的值永远不会改变并且涉及的字段是 text 的情况下才能成为解决
方案。defaultValueinput

首先，更改“默认值”相当尴尬，并且可能会破坏页面的其他内容（人们希望浏览器将defaultValue属性设置为只读，但情况似乎并非如此）。其次，您将被限制为input文本类型的 s。

尽管如此，如果这些都不是问题，上面的代码可以快速适应使用它们而不是data-属性。

于 2013-06-03T20:05:12.100 回答