<html>
<head>
<script type="text/javascript" src="http://xoxco.com/examples/jquery.min.js"></script>
<script type="text/javascript" src="tagsinput.js"></script>
<link href="bootstrap.min.css" rel="stylesheet" />
<style type="text/css">
.tagsinput {
border: 1px solid #CCC;
background: #FFF;
padding: 5px;
width: 100%;
min-width: 760px;
height: 50px;
}
.tagsinput span.tag {
border: 1px solid #a5d24a;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
display: block;
float: left; padding: 5px; text-decoration: none; background: #cde69c; color: #638421; margin-right: 5px; margin-bottom: 5px; font-family: helvetica; font-size: 13px; } .tagsinput span.tag a { font-weight: bold; color: #82ad2b; text-decoration: none; font-size: 11px; } .tagsinput input { width: 80px; margin: 0px; font-family: helvetica; font-size: 13px; border: 1px solid transparent; padding: 5px; background: transparent; color: #000; outline: 0px; margin-right: 5px; margin-bottom: 5px; } .tagsinput div { display: block; float: left; } .tags_clear { clear: both; width: 100%; height: 0px; } .not_valid { background: #FBD8DB !important; color: #90111A !important; } .form { font-size: 14px; color: #333333; border-width: 1px; border-color: #ddd; margin-top: 30px; border-collapse: collapse; } .form th { border-width: 1px; padding: 10px 10px; border-style: solid; border-color: #ddd; color: #333; background-color: #eaeaea; } </style> </head> <body> <table class="table" id="content1"> <tr> <td class='td_Num' style='width:80px;'> 序号 </td> <td class='td_Item'> 规格名称 </td> <td class='td_Item'> 规格值 </td> </tr> </table> <a href="#" onclick="add_line();" class="btn btn-primary dropdown-text">添加</a> <input type="hidden" value="" id="nametags"> <input type="hidden" value="" id="valuetags"> <table id="content" class="table"> <tr> <th > 商品编码 </th> <th> 商品条码 </th> <th> 售价 </th> <th> 成本价 </th> <th> 重量 </th> </tr> </table> <input type="button" value="生成数据" id="btnSubmit" onclick="SaveData()" class="btn btn-primary dropdown-text" /> <div id="datalist"> </div> </body> </html> <script type="text/javascript"> var currentStep = 0; var max_line_num = 0; //添加新记录 function add_line() { max_line_num = $("#content1 tr:eq(1)").children("td").html(); if (max_line_num == null) { max_line_num = 1; } else { max_line_num = parseInt(max_line_num); max_line_num += 1; } if ($("#content1 tr").length > 2) { alert("最多添加两个规格"); return false; } $('#content1').append( "<tr id='line" + max_line_num + "'>" + "<td class='td_Num' >" + max_line_num + "</td>" + "<td class='td_Item' style='width:160px;'><input type='text' onkeyup='keyupname(this);' class='form-control' value='规格" + max_line_num + "' data='" + max_line_num + "'></input></td>" + "<td class='td_Item'><input type='text' class='form-control' id='tags_" + max_line_num + "' data='规格" + max_line_num + "' ></td>" + "<td class='td_Oper'>" + "<span onclick='remove_line(this);'>删除</span> " + "</td>" + "</tr>"); var textdata = $('#content1 tr:eq(' + max_line_num + ')').find("td:eq(1)").find("input").val(); if(max_line_num==1){ $("#content tr:eq(0)").prepend("<th datar='" + max_line_num + "'>" + textdata + "</th>"); }else { $("#content tr:eq(0)").find("th:first").after("<th datar='" + max_line_num + "'>" + textdata + "</th>"); } if (max_line_num < 2) { var firstTr = $("#content").find('tbody>tr:last'); var row = $("<tr class='sku_table_tr'></tr>"); var td = $("<td class='formValue' data='1'></td><td class='formValue'><input type='text' class='form-control' name='sku_Id' readonly='readonly' value='系统生成'></td><td class='formValue'><input type='text' class='form-control' name='sku_code' ></td><td class='formValue'><input type='text' class='form-control' name='sku_price' ></td><td class='formValue'><input type='text' class='form-control' name='sku_jinjia' ></td><td class='formValue'><input type='text' class='form-control' name='sku_weight' ></td>"); row.append(td); $("#content").append(row); } else { for (var i = 1; i <$("#content tr").length; i++) { $("#content tr:eq("+i+")").find("td:first").after("<td class='formValue' data='2'></td>"); }; } $('#tags_' + max_line_num + '').tagsInput({ width: 'auto' }); } function keyupname(argument) { var name = $(argument).val(); var olddata = $(argument).attr("data"); $("#content tr:eq(0)").find("th").each(function () { if ($(this).attr("datar") == olddata) { $(this).html(name); } }); } function remove_line(index) { if (index != null) { currentStep = $(index).parent().parent().find("td:eq(0)").html(); } if (currentStep == 0) { alert('请选择一项!'); return false; } if (confirm("确定要删除改记录吗？")) { $("#content1 tr").each(function () { var seq = parseInt($(this).children("td").html()); if (seq == currentStep) { $(this).remove(); } if (seq > currentStep) { $(this).children("td").each(function (i) { if (i == 0) $(this).html(seq - 1); }); } }); var thname=$(index).parent().parent().find("td:eq(1)").find("input").attr("data"); if (currentStep == 1) { $("#content tr:first").find("th:eq(0)").remove(); } else { $('#tags_1').tagsInput({ width: 'auto', del:2 }); } if (currentStep == 2) { $("#content tr:first").find("th:eq(1)").remove(); } else { $('#tags_2').tagsInput({ width: 'auto', del:1 }); } $("tr[class='sku_table_tr']").find("td").each(function () { if(thname==$(this).attr("data")){ $(this).remove(); } }); } } //保存数据 function SaveData() { var alreadySetSkuVals = []; //获取设置的SKU属性值 $("tr[class='sku_table_tr']").each(function () { var propvalids =$(this).find("input[type='text'][name='sku_Id']").parent().prev().prev().html()+","+$(this).find("input[type='text'][name='sku_Id']").parent().prev().prev().attr("data")+";"+$(this).find("input[type='text'][name='sku_Id']").parent().prev().html()+","+$(this).find("input[type='text'][name='sku_Id']").parent().prev().attr("data");// var propnames = $("#content tr:eq(0)").find("th:eq(0)").html()+","+$("#content tr:eq(0)").find("th:eq(0)").attr("datar")+";"+$("#content tr:eq(0)").find("th:eq(1)").html()+","+$("#content tr:eq(0)").find("th:eq(1)").attr("datar") $("#datalist").html(propvalids); }); } </script>
