点击复选框自动生成表格

jquery自动生成表格

根据复选框选中的数据自动生成表格实现图中第一张表的内容

<script>
		$(document).ready(function() {
			$("input[type=checkbox]", $('.color-box')).click(function() {
				doTable();
			});
			$("input[type=checkbox]", $('.size_box')).click(function() {
				link();
			});
		});
		function link(flag) {
			var sizes = $("input[type=checkbox]:checked", $('.size_box'));
			var check_size = [];
			for (i in sizes) {
				if (sizes[i].checked) {
					check_size.push(sizes[i].value);
				}
			}
		}
		function doTable(flag) {
			var checks = $("input[type=checkbox]:checked", $('.color-box'));
			if (checks.length > 0) {
				var t = $('.divtable table');
				if (t.length <= 0) {
					$('.divtable ').append('<table border="1" class="layui-table"><tr><td>颜色分类</td><td class="sizes">尺码</td><td>价格</td><td>数量</td></tr>');
				}
				addRows(checks);
			} else {
				$('.divtable table').remove();
			}
		}
		function addSRows($sizes) {
			var s = $('.divtable table');
		}
		function addRows($checks) {
			var t = $('.divtable table');
			var $trs = $('tr[class=clsrow]', t);
			for (var i = $trs.length - 1; i < $checks.length; i++) {
				$('.divtable table').append('<tr class="clsrow"><td></td><td></td><td><input type="text" style="width:60px;border: 0px;outline:none;cursor: pointer;">¥</td><td><input type="text" style="width:60px;border: 0px;outline:none;cursor: pointer;"></td></tr>');
			}
			$trs = $('tr[class=clsrow]', t);
			for (i = $checks.length; i < $trs.length; i++) {
				$($trs[i]).remove();
			}
			$trs = $('tr[class=clsrow]', t);
			for (var j = 0; j < $checks.length; j++) {
				var $li = $($checks[j]).next();
				$('td:first', $($trs[j])).empty();
				$('td:first', $($trs[j])).append($li[0].outerHTML + $checks[j].value);
			}
		}