js/jq动态创建表格的行与列
之前做了一个项目,需求是能动态创建表格行,动态创建表格的列,度了很多资料,都没有动态创建列的插件,所以自己动手写了一个
需求大概是(下图)
1.动态添加一行、2.动态添加一列,3.删除行、4.删除列,5.复制行,6.表头的选项是可自定义写入,7.表格的数据可后台传入,也可写入,8.提交数据到后台
//html文件(首先写在html文件中写好表格结构代码,后面再把注释掉的html压缩写到js文件中进行插件的封装)
<div class="creta-table"></div> <!--<div class="table"> <ul class="tbody"> <li class="thead"> <div class="head td"> <input class="td-input" type="text" placeholder="操作" value="操作" disabled> </div> <div class="head td"> <input class="td-input" type="text" placeholder="规格" value="规格"> <div class="removetd btn">×</div> </div> <div class="head td"> <input class="td-input" type="text" placeholder="积分" value="积分"> <div class="removetd btn">×</div> </div> <div class="head td"> <input class="td-input" type="text" placeholder="金额" value="金额"> <div class="removetd btn">×</div> </div> <div class="head td"> <input class="td-input" type="text" placeholder="库存" value="库存"> <div class="removetd btn">×</div> </div> </li> <li class="tr"> <div class="td"> <input class="removetr btn" type="button" value="删行"> <input class="copytr btn" type="button" value="复制"> </div> <div class="td"> <input class="td-input" type="text"> </div> <div class="td"> <input class="td-input" type="text"> </div> <div class="td"> <input class="td-input" type="text"> </div> <div class="td"> <input class="td-input" type="text"> </div> </li> </ul> </div>--> <!-- <div class="addtr btn">添加一行</div> <div class="addtd btn">添加一列</div> <div class="sumbit btn">提交数据</div>--> </body>
//css文件
//css文件 * { margin: 0; padding: 0; } .table input[type="text"], .table input[type="button"] { outline: none; border: none; -webkit-appearance: none; background-color: transparent; box-sizing: border-box; } /*------------------自定义input-placeholder样式-----------------------*/ .table input:focus { outline: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .table input::input-placeholder { color: #fff; } .table input::-webkit-input-placeholder { color: #fff; } .table input:-ms-input-placeholder { color: #fff; } .table input:-moz-placeholder { color: #fff; } .table input::-moz-placeholder { color: #fff; } .table input:focus::-webkit-input-placeholder { color: rgba(0, 0, 0, 0); } .table input:focus::-moz-input-placeholder { color: rgba(0, 0, 0, 0); } /*---------------------表格样式----------------------------*/ .head.td:nth-child(1), .head.td:nth-child(2), .head.td:nth-child(3), .head.td:nth-child(4) { background: #eee; } .table { width: 100%; height: auto; margin: 15px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; overflow: visible } .tbody { margin: 0; padding: 0; border: 1px solid #e8e8e8 } ul li { list-style-type: none; font-size: 0; width: auto; height: auto; border-top: 1px solid #e8e8e8 } ul li:first-child { border-top: none } ul li .td { display: inline-block; width: 100px; height: 36px; line-height: 44px; text-align: center; border-right: 1px solid #e8e8e8 } ul li .td:last-child { border-right: none } .head.td { background-color: #ababab; color: #fff } .btn { line-height: 20px; width: 36px; height: 20px; border: 1px solid; cursor: pointer } input[type="button"].removetr, input[type="button"].removetd { background-color: #fb4747; font-size: 14px; color: #fff; border-radius: 3px; margin-right: 3px } input[type="button"].copytr { background-color: #00abff; font-size: 14px; color: #fff; border-radius: 3px; margin-left: 3px } .removetd { display: inline-block; width: 14px; height: 14px; font-size: 13px; color: #fff; line-height: 15px; border-radius: 50%; cursor: pointer } .addtr, .addtd, .sumbit { display: inline-block; margin: 0 15px; width: 66px; line-height: 20px; text-align: center; background-color: #00abff; font-size: 14px; color: #fff; border-radius: 3px } .sumbit { background-color: #ff8900 } .td-input { display: inline-block; height: 34px; width: 100px; font-size: 14px; color: #3b3b3b; text-align: center } .head.td>.td-input { width: 70px } .tips { position: fixed; left: 50%; top: 20%; z-index: 10; display: none; width: 200px; height: 100px; background: #ababab; margin: 30px auto; text-align: center; border-radius: 6px; border: 1px solid #ababab; box-shadow: 0 3px 3px 1px #ababab; font-size: 16px; color: #fff } .tips-title { padding: 17px; border-bottom: 1px solid #fff } .tips-btn { font-size: 0 } .tips-btn span { display: inline-block; width: 94px; height: 48px; line-height: 48px; border: none; font-size: 16px } .tips-btn .sure { position: relative } .tips-btn .sure:after { position: absolute; content: ""; width: 1px; height: 52px; background-color: #fff; right: 0; top: 0 }
//js文件
(function ($) { $.fn.initTable = function (options) { var defaults = { toolBtn: '', //点击了关闭按钮后的callback clickRemoveRow: function (id) {}, clickRemoveCell: function (id) {}, clickCopyRow: function (id) {} }; $.extend(defaults, options); var $this = $(this); //样式 var $style = '<style></style>'; //element var ele = $('<div class="table"><ul class="tbody"><li class="thead"><div class="head td"><input class="td-input" type="text" placeholder="操作" value="操作" disabled></div></li></ul></div>') //按钮元素 var btnEleContainer = $('<div><div class="addtr btn">添加一行</div><div class="addtd btn">添加一列</div><div class="sumbit btn">提交数据</div></div>'); ele.on('click', 'input.removetr.btn', function () { var id = $(this).parents('.tr').index(); defaults.clickRemoveRow(id - 1); }); ele.on('click', '.removetd.btn', function () { var id = $(this).parents('.td').index(); defaults.clickRemoveCell(id - 1); }); ele.on('click', 'input.copytr.btn', function () { var id = $(this).parents('.tr').index(); defaults.clickCopyRow(id - 1); }); //控制对象 var controlObject = { //添加列 addCell: function (cellName) { var i = '', inputEle = ''; inputEle += '<div class="td"><input class="td-input" type="text" /></div>'; ele.find('li').append(inputEle); ele.find('.thead .td:last-child').append('<div class="removetd btn">×</div>') ele.find('.thead .td:last-child').addClass("head"); ele.find('.thead .td:last-child input.td-input').val(cellName); inputEle = ''; }, //添加行 addRow: function (datas) { var i = '', inputEle = '', len = $(".head.td").length; ele.find('.tbody').append('<li class="tr"><div class="td"><input class="removetr btn" type="button" value="删行" /><input class="copytr btn" type="button" value="复制"/></div></li>'); //给行添加同等的列 for (i = 0; i < len - 1; i++) { inputEle += '<div class="td"><input class="td-input" type="text" value="' + (datas ? datas[i] : "") + '"/></div>'; $('ul li:last-child').append(inputEle); inputEle = ''; }; }, //删除列 removeCell: function (id) { $('ul li').each(function () { $(this).children().eq(id + 1).remove(); }); }, //删除行 removeRow: function (id) { $('ul li').eq(id + 1).remove(); }, //获取数据 getData: function () { var row_len = $("li").length; var cell_len = $('.head.td').length; var arrRows = []; for (var i = 0; i < row_len; i++) { arrRows[i] = []; for (var j = 1; j < cell_len; j++) { arrRows[i][j - 1] = $('input', $(".td", $("li").get(i)).get(j)).val(); } } console.log(arrRows); return arrRows } }; //添加元素 $this.prepend(ele); $('head').append($style); $(defaults.toolBtn).append(btnEleContainer); //返回控制对象 return controlObject; }; })(jQuery);
//那html页面上怎么用呢?
<script> $(function() { var tableControl = $('body').initTable({ toolBtn: "body", //点击了关闭按钮后的callback clickRemoveRow: function(id) { tableControl.removeRow(id); }, clickRemoveCell: function(id) { tableControl.removeCell(id); }, clickCopyRow: function(id) { var alldata = tableControl.getData(); var onedata = alldata[id + 1]; tableControl.addRow(onedata); }, }); //添加列 tableControl.addCell('规格'); tableControl.addCell('积分'); tableControl.addCell('金额'); //例如添加一列 $('.addtd.btn').click(function() { //可添加参数 tableControl.addCell('颜色'); }); //添加行 tableControl.addRow(["a", "b", "c"]); tableControl.addRow([1, 2, 3]); tableControl.addRow(); //例如添加一行 $('.addtr.btn').click(function() { //可添加参数 //tableControl.addRow(["a", "b", "c"]); tableControl.addRow(); }); //获取数据 tableControl.getData(); // $('.sumbit.btn').click(function() { tableControl.getData(); }); //删除行的方法 // tableControl.removeRow(2); //删除列的方法 // tableControl.removeCell(2); }); </script>