js/jq动态创建表格的行与列

最新推荐文章于 2021-12-28 19:46:56 发布

辛苦的码农20200609

最新推荐文章于 2021-12-28 19:46:56 发布

阅读量762

点赞数 2

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog_h21jij02aacb.html

版权

前端专栏收录该内容

785 篇文章 4 订阅

订阅专栏

之前做了一个项目，需求是能动态创建表格行，动态创建表格的列，度了很多资料，都没有动态创建列的插件，所以自己动手写了一个

需求大概是（下图）

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>