<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!--[if lt IE 9]-->
<script type="text/javascript" src="${pageContext.request.contextPath}/admin/lib/html5shiv.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/admin/lib/respond.min.js"></script>
<!--[endif]-->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/admin/static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/admin/static/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/admin/lib/Hui-iconfont/1.0.8/iconfont.css" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/admin/static/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/admin/static/h-ui.admin/css/style.css" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/admin/static/h-ui.admin/css/page.css" />
<!--[if IE 6]-->
<script type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix('*');</script>
<!--[endif]-->
<title>Formula Project</title>
<link rel="stylesheet" href="lib/zTree/v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
</head>
<body class="pos-r">

<div>
	<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> Home Page
		<span style="text-align: center;padding-left: 600px;"><b>${product.name}</b></span>
		<a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a>
	</nav>
	<div class="page-container">


		<div class="mt-20">
			<h4>Width & Height</h4>
			<table class="table table-border table-bordered table-bg table-hover table-sort">
				<thead>
				<tr class="text-c">
					<th width="60">ID</th>
					<th width="150">Size </th>
					<th width="100">Material </th>
					<th width="150">Lamination</th>
					<th width="80">Price</th>
					<th width="80">50</th>
					<th width="80">100</th>
					<th width="80">250</th>
					<th width="80">500</th>
					<th width="80">1000</th>
					<th width="80">2500</th>
					<th width="80">5000</th>
					<th width="80">10000</th>
					<th width="80">Operation</th>
				</tr>
				</thead>
				<tbody>
				<c:forEach items="${list}" var="p" varStatus="s">
						<tr class="text-c va-m">
							<td>${s.count}</td>
							<td>${p.size}</td>
							<td>${p.name}</td>
							<td>${p.prints}</td>
							<td class="td-status" id="num${0}Id${p.id }">${p.price}</td>
							<td class="td-status" id="num${1}Id${p.id }">${p.num1}</td>
							<td class="td-status" id="num${2}Id${p.id }">${p.num2}</td>
							<td class="td-status" id="num${3}Id${p.id }">${p.num3}</td>
							<td class="td-status" id="num${4}Id${p.id }">${p.num4}</td>
							<td class="td-status" id="num${5}Id${p.id }">${p.num5}</td>
							<td class="td-status" id="num${6}Id${p.id }">${p.num6}</td>
							<td class="td-status" id="num${7}Id${p.id }">${p.num7}</td>
							<td class="td-status" id="num${8}Id${p.id }">${p.num8}</td>
							<td class="td-manage">
								<a style="text-decoration:none" class="ml-5" onClick="updataSize('${p.id }')" title="Compile"><i class="Hui-iconfont">&#xe6df;</i></a>
								<a style="text-decoration:none" class="ml-5" onClick="submitSize('${p.id }')" title="Compile"><i class="Hui-iconfont"><img width="15" height="20" class="product-thumb" src="${pageContext.request.contextPath}/admin/101.png"></i></a>
						</tr>
				</c:forEach>
				</tbody>
			</table>
		</div>

	</div>
</div>

<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="${pageContext.request.contextPath}/admin/lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/admin/lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/admin/static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/admin/static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 作为公共模版分离出去-->
<script type="text/javascript" src="${pageContext.request.contextPath}/admin/lib/zTree/v3/js/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/admin/lib/My97DatePicker/4.8/WdatePicker.js"></script>

<script type="text/javascript">

	var ii = 0;
	function updataSize(id){
	   if(ii==0){
           for(var i=0;i<=8;i++) {
               var price = $("#"+"num"+i+"Id"+id).text();
               var input = $('<input type="text" id="size'+i+'Idd' + id + '" class="price" style="width:70px;" value="' + price + '">');
               $("#"+"num"+i+"Id"+id).html(input);
               $('input').click(function () {
                   return false;
               }); //阻止表单默认点击行为
           }
	   }
	   ii++;
	}
	function submitSize(id){
        var checkValue = ""; //定义一个数组
        for(var i=0;i<=8;i++){
            var price = $("#"+"size"+i+"Idd"+id).val();
            checkValue += price+",";
            $("#"+"num"+i+"Id"+id).html(price);
        }
		/*$("#"+"sizeId"+id).html(price);*/
		 $.ajax({  
	    		url : 'submit-size02.html',
	            type : "POST",   
	            data : {"pid":id,"prices":checkValue},// 序列化表单值
	            async : false,
				dataType : 'text', 
	            success : function(data) {  //成功
	                if(data == 'ok'){
	                    ii=0;
	                	alert("Modify Successfully");
	                }else{
	                	alert("Fail to Modify");
	                }
	            },  
	            error : function(request) {  //失败的话
	                /* alert("Connection error");  */
	            } 
	         });
		}
	
	



	
	
</script>
</body>
</html>