Jq create 插件

源码：

  ; (function (window, $) {
            var PLUGIN_NAME = "jqcreate";

            function appendTo(target, trData) {
                var state = $.data(target, PLUGIN_NAME);
                var $selector = state.selector;
                var options = state.options;
                options.trData($(state.template).appendTo($selector.find('tbody'))[0], trData);
            }

            function data(target, data) {
                var state = $.data(target, PLUGIN_NAME);
                var options = state.options;
                var res = [];
                if (!data) data = [];
                $(target).find('tbody>tr').each(function (i, tr) {
                    var obj = options.trData(tr, data[i]);
                    obj.rowIndex = i;
                    res.push(obj);
                })
                return res;
            }

            function _init(target, state, options) {

                var $selector = $(target);
                if (!$selector.hasClass("c-table")) $selector.addClass("c-table");

                state.template = options.template($selector);

                if (!state.template) throw "模板不允许为空";
                if (options.data && options.data.length > 0) {
                    for (var i = 0; i < options.data.length; i++) {
                        appendTo(target, options.data[i]);
                    }
                }
                data(target);
                $selector.on('click', '.c-add', function () {
                    appendTo(target);
                })

                $selector.on('click', '.c-del', function () {
                    $(this).closest("tr").remove();
                })
            }

            $.fn[PLUGIN_NAME] = function (options) {
                if (typeof options === 'string' && $.fn[PLUGIN_NAME].methods[options]) {
                    return $.fn[PLUGIN_NAME].methods[options].apply(this, Array.prototype.slice.call(arguments, 1));
                } else if (typeof options === 'object' || !options) {
                    return $.fn[PLUGIN_NAME].methods.init.apply(this, arguments);
                } else {
                    $.error('Method ' + options + ' does not exist on jQuery' + PLUGIN_NAME);
                }
            };
            $.fn[PLUGIN_NAME].version = "1.0";
            $.fn[PLUGIN_NAME].methods = {
                init: function (options) {
                    return this.each(function () {
                        var $this = $(this);
                        var state = $.data(this, PLUGIN_NAME);
                        if (state) {
                            $.extend(state.options, options);
                        } else {
                            var settings = $.extend({}, $.fn[PLUGIN_NAME].defaults, options);
                            state = $.data(this, PLUGIN_NAME, {
                                target: this,
                                selector: $this,
                                options: settings,
                            });
                            _init(this, state, settings);
                        }
                    });
                },
                data: function (arr) {
                    if (!arr) arr = [];
                    if (arr instanceof Array) {
                        return data(this[0], arr);
                    }
                    throw "【data】仅支持数组类型";
                },
                addRow: function (rowData) {
                    appendTo(this, rowData);
                }
            };

            $.fn[PLUGIN_NAME].defaults = {
                template: function ($selector) {
                    var $body = $selector.find('tbody');
                    var html = $body.html();
                    return ($body.html(""), html);
                },
                trData: function (tr, data) {
                    var res = {};
                    $(tr).find('input[type="text"]').each(function (i, input) {
                        if (data) $(input).val(data[input.name])
                        res[input.name] = $(input).val();
                    });
                    return res;
                },
                data: []
            };
        })(window, jQuery); 

        //$('#prop table').jqcreate("data", [{ Name: "张三", CNValue: "李四", ENValue: "Mr.Li" }]);

示例：

<table id="myTable">
<tbody>
                <tr>
                    <td><input type="text" name="CnName" placeholder="请输入中文属性名" /></td>
                    <td><input type="text" name="CnValue" placeholder="请输入中文属性" /></td>
                    <td><input type="text" name="EnName" placeholder="请输入英文属性名" /></td>
                    <td><input type="text" name="EnValue" placeholder="请输入英文属性" /></td>
                    <td><a class="c-del" href="javascript:">删除</a></td>
                    <td><a class="c-clear" href="javascript:">清空</a></td>
                </tr>
</tbody>
</table>

 

生成 html ：

 $('#myTable').jqcreate("data", [{ CNName: "张三", CNValue: "李四", ENValue: "Mr.Li" }]);

获取数据：
$('#myTable').jqcreate("data")

设置好多种 trData 即可复用。