javascript - 使用 JQuery 添加表单元素

Question

这可能是一个非常基本的问题，我知道如何使用纯 DOM 来做，但想学习 JQuery 的方法来做这件事。

在使用适当的 JQuery 选择器识别节点集后，我想将文本区域、保存和取消按钮附加到每个节点，并在按钮上附加适当的回调函数以将值存储到数据库中。如果数据库存储了一个值已经，它应该预先填充在文本区域中。我可以处理后端交互部分，我只是想知道在添加/删除表单元素方面做这类事情的最佳实践。

谢谢

Answer 1

可能是这样的:

jQuery(yourNodes).each(function(){

    var self = this,
        loading = $('<div>LOADING</div>').appendTo(self),
        id = self.id.replace(/^edit/,'');

    // Retrieve textarea from server
    jQuery.get('/getDataForTextArea?id=' + id, function(textareaValue){

        loading.remove();

        var textarea = jQuery('<textarea/>')
            .attr('id', 'txt' + id)
            .val(textareaValue)
            .add(
                 jQuery('<button>Save</button>')
                    .attr('id', 'btnSave' + id)
                    .click(function(){ /* Click handler */ })
            )
            .add(
                 jQuery('<button>Cancel</button>')
                    .attr('id', 'btnCancel' + id)
                    .click(function(){
                        /* Remove nodes */
                        tr.remove();
                    })
            );

        var tr = jQuery('<tr colspan="4"><td/></tr>');

        tr.find('td').append(textarea);
        tr.appendTo(self);

    });

});