7

ページがあり、テーブルにデータを表示します。
各テーブルにcheckboxはchecked、ユーザーがJavascriptを介して特定の行を変更できる場合の列があります。
これは、 anまたは a のtdいずれかをカプセル化し、これらをユーザーが編集できるようにすることで行われます。 ユーザーが行を変更して保存を押すと、変更が保存されます。これまでのところ大丈夫です。 私の問題は、どのように実装するのですか？ ユーザーは多くの行、つまりチェック ボックスを選択して変更できますが、キャンセルを押すこともできます。キャンセルすると、元の値が表示されます (行は再び編集できなくなります)。inputselect

cancel

しかし、キャンセル操作は Javascript でどのように実装されるのでしょうか? グローバルなデータ構造にデータを保存しますか? Javascript でこれはどれでしょうか?

4

4 に答える 4

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 に答える