问题描述
- 淘宝发布宝贝宝贝规格js单击颜色分类自动生成table 项目今天要上线了，请务必帮忙解决谢谢
-
需求：点击一个单选框出现表单 每增加一个下边就添加一个 以此类推 动态添加表单
http://jsbin.com/nejoqulipe/edit?html,output这是在线demo 这是我的邮箱529865274@qq.com，请及时联系我
解决方案
类似下面这样
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js">
</script>
<script>
$(document).ready(function(){
$("input[type=checkbox]",$('#divchks')).click(function(){
doTable();
});
});
function doTable(flag){
var checks= $("input[type=checkbox]:checked",$('#divchks'));
if(checks.length>0){
var t = $('#divtable table');
if(t.length<=0){
$('#divtable').append('<table border="1"></table>');
}
addRows(checks);
}else{
$('#divtable table').remove();
}
}
function addRows($checks){
var t = $('#divtable table');
var $trs = $('tr',t);
for(var i=$trs.length-1;i<$checks.length;i++){
$('#divtable table').append('<tr><td></td><td></td></tr>');
}
$trs = $('tr',t);
for(i=$checks.length;i<$trs.length;i++){
$($trs[i]).remove();
}
$trs = $('tr',t);
for(var j=0;j<$checks.length;j++){
$('td:first',$($trs[j])).html($checks[j].value);
}
}
</script>
</head>
<body>
<div id='divchks'>
<input type='checkbox' value='军绿色'/>军绿色
<input type='checkbox' value='天蓝色'/>天蓝色
<input type='checkbox' value='黄色'/>黄色
</div>
<div id='divtable'></div>
</body>
</html>
解决方案二：
看看，是不是下面这样，表头和颜色，如果还有其他，都可以仿照li颜色的方式加入。另外，注意下区分表头和其他行tr的class
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js">
</script>
<script>
$(document).ready(function(){
$("input[type=checkbox]",$('#divchks')).click(function(){
doTable();
});
});
function doTable(flag){
var checks= $("input[type=checkbox]:checked",$('#divchks'));
if(checks.length>0){
var t = $('#divtable table');
if(t.length<=0){
$('#divtable').append('<table border="1"><tr><td>颜色分类</td><td>图片</td></tr></table>');
}
addRows(checks);
}else{
$('#divtable table').remove();
}
}
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></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);
}
}
</script>
</head>
<body>
<div id='divchks'>
<input type='checkbox' value='军绿色'/><i style="background:#5d762a; width:10px;height:10px;display:block;"></i>军绿色
<input type='checkbox' value='天蓝色'/><i style="background:#1d162a; width:10px;height:10px;display:block;"></i>天蓝色
<input type='checkbox' value='黄色'/><i style="background:#5f762f; width:10px;height:10px;display:block;"></i>黄色
</div>
<div id='divtable'></div>
</body>
</html>
时间： 2024-09-20 21:13:55