源码:
; (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 即可复用。