根据勾选不同规格的种类，动态创建表格，点击加号可以添加种类，目前没实现改变输入框的值实时改变表格对应的值，只能通过再次勾选改变。表格开关默认开启。 资源demo下载地址： https://download.csdn.net/download/qq_39232387/13192560 1。默认 2.勾选后 3.勾选后4.需要引入jQuery和对应图片 5.代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> input { outline: none; } .disposeBox { width: 899px; height: auto; background:rgba(254,252,240,1); border:1px solid rgba(191,191,191,1); padding: 30px 0 21px 33px; } .dispose_a { margin-bottom: 25px; font-weight:bold; color:rgba(92,92,92,1); font-size:14px; } .dispose_b { height: auto; overflow: hidden; } .dispose_b > div { float: left; } .yesBox { width:20px; height:20px; border:1px solid rgba(191,191,191,1); margin-right: 9px; } .addO { width: 22px; height: 21px; margin-left: 9px; } .customBox { width: auto; height: 32px; display: flex; align-items: center; margin-bottom: 15px; margin-right: 45px; } .customBox input { width:91px; height:29px; background:rgba(255,255,255,1); border:1px solid rgba(191,191,191,1); border-radius:4px; text-align: center; } .disposeBox input::-webkit-input-placeholder{ color:rgba(184,182,182,1); text-align: center; } .disposeBox input::-moz-placeholder{ color:rgba(184,182,182,1); text-align: center; } .disposeBox input:-moz-placeholder{ color:rgba(184,182,182,1); text-align: center; } .disposeBox input:-ms-input-placeholder{ color:rgba(184,182,182,1); text-align: center; } .yesBox1 { background: url(yes.png) no-repeat; background-position:center; background-size: 16px 10px; } li { list-style: none; } #tbd { font-size: 14px; text-align: center; } #tbd td{ border-right: 1px solid #BFBFBF; } #tbd input,#tbd select { width: 90px; outline: none; height: 22px; text-align: center; display: block; border: 0; } .priceBox_head { height: 35px; background: #E5E5E5; } .priceBox_head th { padding: 0 11px; } .grade1 { border-bottom: 1px solid #BFBFBF; box-sizing: border-box; } .grade2 div { border-bottom: 1px solid #BFBFBF; box-sizing: border-box; } .grade3 div,.td4 div,.td5 div,.td6 div,.td7 div,.td8 div,.td9 div,.td10 div,.td11 div { height: 25px; line-height: 25px; border-bottom: 1px solid #BFBFBF; box-sizing: border-box; } .customBox1 input { width: 30px; border: 0; background-color: rgba(254,252,240,1); text-align: left; } .customBox1 { margin-right: 22px ; } </style> </head> <body> <div class="disposeBox"> <div class="dispose"> <div class="dispose_a">请选择您的商品包装(<span style="color: #FE7474;">至少选择一项</span>)</div> <div class="dispose_b dispose_b1"> <div class="customBox customBox1"> <div class="yesBox yes1"></div> <input type="text" name="" id="" value="瓶" placeholder="瓶" unselectable="on" /> </div> <div class="customBox customBox1"> <div class="yesBox yes1"></div> <input type="text" name="" id="" value="桶" placeholder="桶" unselectable="on" /> </div> <div class="customBox customBox1"> <div class="yesBox yes1"></div> <input type="text" name="" id="" value="袋" placeholder="袋" unselectable="on" /> </div> <div class="customBox customBox1"> <div class="yesBox yes1"></div> <input type="text" name="" id="" value="槽车" placeholder="槽车" unselectable="on" /> </div> <div class="customBox"> <div class="yesBox yes1"></div> <input type="text" name="" id="" value="" placeholder="自定义"/> <img class="addO" src="add.png" alt=""> </div> </div> </div> <div class="dispose"> <div class="dispose_a">请选择您的商品<span>纯度</span>(<span style="color: #FE7474;">至少选择一项并填写</span>)</div> <div class="dispose_b dispose_b2"> <div class="customBox"> <div class="yesBox yes2"></div> <input type="text" name="" id="" value="" placeholder="自定义"/> <img class="addO" src="add.png" alt=""> </div> </div> </div> <div class="dispose"> <div class="dispose_a">请选择您的商品<span>数量</span>(<span style="color: #FE7474;">至少选择一项并填写</span>)</div> <div class="dispose_b dispose_b3"> <div class="customBox"> <div class="yesBox yes3"></div> <input type="text" name="" id="" value="" placeholder="自定义" id="upload"/> <img class="addO" src="add.png" alt=""> </div> </div> </div> </div> <br> <br> <table class="priceBox" border="0" cellpadding="0" cellspacing="0"> <thead> <tr class="priceBox_head" style="display: none;"> <th style="display: none;">包装</th> <th style="display: none;">纯度</th> <th style="display: none;">数量</th> <th>商城价/￥</th> <th>市场价/￥</th> <th>价格单位</th> <th>库存</th> <th>期货/天</th> <th>规格说明</th> <th>最低起订量</th> <th>开关</th> </tr> </thead> <tbody id="tbd"> </tbody> </table> <script type="text/javascript" src="jquery-2.1.1.js"></script> <script> $(function(){ //点击+ $(document).on('click', '.addO', function(){ $(this).hide() $(this).parent('.customBox').parent('.dispose_b1').append( " <div class='customBox'><div class='yesBox yes1'></div><input type='text' name='' id='' value='' placeholder='自定义' /><img class='addO' src='add.png' alt=''></div> " ); $(this).parent('.customBox').parent('.dispose_b2').append( " <div class='customBox'><div class='yesBox yes2'></div><input type='text' name='' id='' value='' placeholder='自定义' /><img class='addO' src='add.png' alt=''></div> " ); $(this).parent('.customBox').parent('.dispose_b3').append( " <div class='customBox'><div class='yesBox yes3'></div><input type='text' name='' id='' value='' placeholder='自定义' /><img class='addO' src='add.png' alt=''></div> " ); }) //点击显示隐藏对勾 $(document).on('click', '.yesBox', function(){ if($(this).hasClass("yesBox1") ){ console.log($(this).hasClass("yesBox1")) $(this).removeClass("yesBox1") }else if($(this).siblings("input").val() != ""){ $(this).addClass("yesBox1"); } var gradeArr1 = []; var gradeArr2 = []; var gradeArr3 = []; //第一级数组 $(".yes1").siblings("input").each(function (i) { if($(this).val() != "" && $(this).siblings(".yes1").hasClass("yesBox1")){ gradeArr1.push($(this).val()); } }); console.log(gradeArr1); //第二级数组 $(".yes2").siblings("input").each(function (i) { if($(this).val() != "" && $(this).siblings(".yes2").hasClass("yesBox1")){ gradeArr2.push($(this).val()); } }); console.log(gradeArr2); //第三级数组 $(".yes3").siblings("input").each(function (i) { if($(this).val() != "" && $(this).siblings(".yes3").hasClass("yesBox1")){ gradeArr3.push($(this).val()); } }); console.log(gradeArr3); $("#tbd").html(""); var arrLength1 = gradeArr1.length; var arrLength2 = gradeArr2.length; var arrLength3 = gradeArr3.length; if(arrLength1) { //如果有第一列 for(var i=0;i<arrLength1;i++) { $("#tbd").append("<tr class='priceBox_con'><td class='grade1'><div>"+gradeArr1[i]+"</div></td></tr>"); } if(arrLength2) { //如果有第二列 $(".priceBox_con").append("<td class='grade2'></td>") for(var j=0;j<arrLength2;j++) { $(".grade2").append("<div>"+gradeArr2[j]+"</div>"); } if(arrLength3) { //如果有第三列 $(".priceBox_con").append("<td class='grade3 maxLength'></td>"); for(var m=0;m<arrLength2;m++) { for(var k=0;k<arrLength3;k++) { $(".grade3").append("<div>"+gradeArr3[k]+"</div>"); } } }else { $(".grade2").addClass("maxLength") } }else { //没有第二列 if(arrLength3) { //如果有第三列 $(".priceBox_con").append("<td class='grade3 maxLength'></td>"); for(var k=0;k<arrLength3;k++) { $(".grade3").append("<div>"+gradeArr3[k]+"</div>"); } }else { $(".grade1").addClass("maxLength") } } }else { //没有第一列 if(arrLength2) { //如果有第二列 for(var j=0;j<arrLength2;j++) { $("#tbd").append("<tr class='priceBox_con'><td class='grade2'><div>"+gradeArr2[j]+"</div></td></tr>"); } if(arrLength3) { //如果有第三列 $(".priceBox_con").append("<td class='grade3 maxLength'></td>") for(var k=0;k<arrLength3;k++) { $(".grade3").append("<div>"+gradeArr3[k]+"</div>"); } }else { $(".grade2").addClass("maxLength") } }else { //没有第二列 if(arrLength3) { //如果有第三列 for(var k=0;k<arrLength3;k++) { $("#tbd").append("<tr class='priceBox_con'><td class='grade3 maxLength'><div>"+gradeArr3[k]+"</div></td></tr>"); } }else { } } } if($(".maxLength").length > 0) { $(".priceBox_con").append("<td class='td4'></td>"); $(".priceBox_con").append("<td class='td5'></td>"); $(".priceBox_con").append("<td class='td6'></td>"); $(".priceBox_con").append("<td class='td7'></td>"); $(".priceBox_con").append("<td class='td8'></td>"); $(".priceBox_con").append("<td class='td9'></td>"); $(".priceBox_con").append("<td class='td10'></td>"); $(".priceBox_con").append("<td class='td11'></td>"); var maxLengthNum = $("#tbd tr:eq(0) .maxLength").children("div").length; console.log(maxLengthNum) for(var n=0;n<maxLengthNum;n++) { $(".td4").append("<div><input type='text' name='' id='' value='' placeholder='请输入价格'/></div>"); $(".td5").append("<div><input type='text' name='' id='' value='' placeholder='请输入价格'/></div>"); $(".td6").append("<div><select name=''><option value=''>克(g)</option><option value=''>千克(Kg)</option><option value=''>毫升(ml)</option><option value=''>升(L)</option><option value=''>吨(t)</option><option value=''>瓶</option><option value=''>桶</option><option value=''>车</option><option value=''>箱</option><option value=''>袋</option></select></div>"); $(".td7").append("<div><input type='text' name='' id='' value='' placeholder='请点击输入'/></div>"); $(".td8").append("<div><input type='text' name='' id='' value='' placeholder='请点击输入'/></div>"); $(".td9").append("<div><input type='text' name='' id='' value='' placeholder='例:25g/瓶'/></div>"); $(".td10").append("<div><input type='text' name='' id='' value='' placeholder='请点击输入'/></div>"); $(".td11").append("<div><img class='table_open' src='table_open.png' alt=''><img class='table_close' style='display: none;' src='table_close.png' alt=''></div>") } }; console.log(arrLength3 * 25); if(arrLength3 > 0) { $(".grade2 div").css("height",arrLength3 * 25) $(".grade2 div").css("line-height",arrLength3 * 25 + "px") $(".grade3 div").css("height","25px") }else { $(".grade2 div").css("height","25px") } if(arrLength1) { $(".priceBox_head th:eq(0)").show(); }else { $(".priceBox_head th:eq(0)").hide(); } if(arrLength2) { $(".priceBox_head th:eq(1)").show(); }else { $(".priceBox_head th:eq(1)").hide(); } if(arrLength3) { $(".priceBox_head th:eq(2)").show(); }else { $(".priceBox_head th:eq(2)").hide(); } if(arrLength1 || arrLength2 || arrLength3) { $(".priceBox_head").show(); }else { $(".priceBox_head").hide(); } }) var imgStatus = false; $(document).on('click', '.table_open', function() { imgStatus = false; $(this).hide() $(this).siblings(".table_close").show() }) $(document).on('click', '.table_close', function() { imgStatus = true; $(this).hide() $(this).siblings(".table_open").show() }) }) </script> </body> </html>