<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jQuery添加录入商品信息表单代码</title>
<link href="" rel="stylesheet">
<script src="js/jquery-1.11.3.min.js"></script>
<script>
$(function(){
$('.innerbtn').click(function(){
$(this).next('.pop_box').slideDown('400');
});
$('.closepop').click(function(){
$('.pop_box').slideUp('400');
});
$('.tbody1').on("click",".alonTr .innerbtn",function(){
$(this).next('.pop_box').slideDown('400');
})
$('.tbody1').on("click",".alonTr .closepop",function(){
$('.pop_box').slideUp('400');
})
// 新增表单
var show_count = 20;
var count = 1;
$(".AddTr").click(function () {
var length = $(".tabInfo .tbody1>tr").length;
//alert(length);
if (length < show_count)
{
$(".model1 tbody .alonTr").clone().appendTo(".tabInfo .tbody1");
}
});
// 新增内件
var show_count2 = 20;
var count2 = 1;
$(".addtr2").click(function () {
var length = $(this).parent('.btn_a1').prev('.neijian').children('.tbody2 tr').length;
//alert(length);
if (length < show_count2)
{
$(".model2 tbody tr").clone().appendTo($(this).parent('.btn_a1').prev('.neijian').children('.tbody2'));
}
});
// 动态的新增内件
var show_count3 = 20;
var count3 = 1;
$(".tbody1").on("click",".dtadd",function () {
var length = $(".neijian .tbody2 tr").length;
//alert(length);
if (length < show_count3)
{
$('.model2 tbody tr').clone().appendTo($(this).parent('.btn_a1').prev('.neijian').children('.tbody2'));
}
});
});
function deltr(opp) {
var length = $(".tabInfo .tbody1>tr").length;
//alert(length);
if (length <= 1) {
alert("至少保留一行");
} else {
$(opp).parent().parent().remove();//移除当前行
}
}
// ----
function deltr2(opp) {
var length = $(this).parent('.btn_a1').prev('.neijian').children('.tbody2 tr').length;
//alert(length);
if (length <= 1) {
alert("至少保留一行");
} else {
$(opp).parent().parent().remove();//移除当前行
}
}
// ----
function deltr3(opp) {
var length = $('.neijian .tbody2 tr').length;
//alert(length);
if (length <= 1) {
alert("至少保留一行");
} else {
$(opp).parent().parent().remove();//移除当前行
}
}
// ----
</script>
<style>
*{padding: 0px;margin: 0px;font-style: normal;list-style-type: none;text-decoration: none;font-family: "微软雅黑";font-size: 14px;border:0 none;line-height: 24px;color: #666; }
table{table-layout: fixed;width: 100%;}
input,button,select,textarea{outline: none;resize:none;padding: 3px 5px;border:1px solid #ddd;}
input:focus,textarea:focus{border:1px solid #9ab6d6;}
.whiteBg{background: #fff;}
.normTbe{border-left:1px solid #ddd;border-top:1px solid #ddd; }
.normTbe td,.normTbe th{border-bottom: 1px solid #ddd;border-right:1px solid #ddd;padding: 15px;text-align: center;}
.normTbe input{width: 80%;text-align: center;}
.wrapper{width: 1140px;padding: 0 20px; margin: 0 auto;clear: both;}
.hide{display: none;}
.hideTr{background: #ddd;}
.pop_box{position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 99999;}
.pop_box .bg{background: #000;opacity: 0.7;filter:alpha(opacity=70);position: absolute;top:0;left: 0;right: 0;bottom: 0;}
.pop_box .contentP{position: relative;margin:0 auto;margin-top: 10%; background: #fff;width: 80%;}
.pop_box .PTit{height: 45px;background: #eee;}
.pop_box .PTit h3{line-height: 45px;float: left;padding-left: 15px;font-weight: normal;font-size: 16px;}
.pop_box .PTit a{display: block;width: 45px;line-height: 45px;text-align: center;background: #ddd;float: right;font-size: 20px;}
.pop_box .PTit a:hover{background: #50abfd;color: #fff;}
.pop_box .textmian{padding: 15px;}
.btn_a1{padding-top: 15px;}
.btn_a1 a{display: inline-block;*display: inline;*zoom: 1;width: 120px;line-height: 45px;background: #50abfd;color: #fff;}
.btn_a1 .addtr2,.btn_a1 .dtadd{background: #ff9900;}
</style>
</head>
<body>
<div class="wrapper">
<table cellspacing="0" cellpadding="0" border="0" class="normTbe model2 hide">
<tbody>
<tr class="alonTr2">
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><select name=""><option value="1">中国</option><option value="2">美国</option></select></td>
<td><a class="text_a" href="javascript:;" onClick="deltr3(this)">删除</a></td>
</tr>
</tbody>
</table>
<table cellspacing="0" cellpadding="0" border="0" class="normTbe model1 hide">
<tbody>
<tr class="alonTr">
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td>
<a href="javascript:;" class="innerbtn">添加内件(<span>0</span>)</a>
<div class="pop_box hide">
<div class="bg"></div>
<div class="contentP">
<div class="PTit">
<h3>内件商品信息</h3>
<a href="javascript:;" class="closepop">x</a>
</div>
<div class="textmian">
<table class="normTbe neijian" cellspacing="0" cellpadding="0" border="0";>
<thead>
<tr>
<th>内件商品描述</th>
<th>数量</th>
<th>重量</th>
<th>单价</th>
<th>总价</th>
<th>HSCODE</th>
<th>产地</th>
<th>操作</th>
</tr>
</thead>
<tbody class="tbody2">
<tr>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><select name=""><option value="1">中国</option><option value="2">美国</option></select></td>
<td><a class="text_a" href="javascript:;" onClick="deltr2(this)">删除</a></td>
</tr>
</tbody>
</table>
<div class="btn_a1">
<a class="dtadd" href="javascript:;">新增内件</a> <a class="closepop" href="javascript:;">确定内件</a>
</div>
</div>
</div>
</div>
<br /><a class="text_a" href="javascript:;" onClick="deltr(this)">删除</a>
</td>
</tr>
</tbody>
</table>
<div class="itemInfo">
<table cellspacing="0" cellpadding="0" border="0" class="normTbe tabInfo">
<thead>
<tr>
<th><em>*</em> 件数：</th>
<th><em>*</em> 单件重量：</th>
<th><em>*</em> 总重量：</th>
<th>长度(厘米)：</th>
<th>宽度(厘米)：</th>
<th>高度(厘米)：</th>
<th>操作</th>
</tr>
</thead>
<tbody class="tbody1">
<tr>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td>
<a href="javascript:;" class="innerbtn">添加内件(<span>0</span>)</a>
<div class="pop_box hide">
<div class="bg"></div>
<div class="contentP">
<div class="PTit">
<h3>内件商品信息</h3>
<a href="javascript:;" class="closepop">x</a>
</div>
<div class="textmian">
<table class="normTbe neijian" cellspacing="0" cellpadding="0" border="0";>
<thead>
<tr>
<th>内件商品描述</th>
<th>数量</th>
<th>重量</th>
<th>单价</th>
<th>总价</th>
<th>HSC
