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);
}
}