jQuery录入商品信息表单代码

版权：原创更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]
以下是 jQuery录入商品信息表单代码的示例演示效果:
当前平台(PC电脑)
平台:
整屏预览
部分效果截图:
HTML代码(index.html):
<!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>
<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>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="addtr2" 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="copybtn">
		<a href="javascript:;" class="AddTr">新增</a>
		<a href="javascript:;" class="ture">确定</a>
	</div>
    </div>
</div><!-- itemInfo -->
</div>
</body>
</html>
附件:下载该文件资源,减少时间成本(增值服务)