<!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" /> <title>Untitled Document</title> <style> .bottom { float: left; width: 100%; } div { display: block; } .a4 { margin: auto; padding: 0; font: 12pt "Tahoma"; max-width: 21cm; max-height: 29.7cm; } .page { width: 100%; margin: auto; border: solid 1px #C0C0C0; border-top: none; border-bottom: none; min-height: 27.82cm; float: left; -moz-box-shadow: 0 0 0 1.5px #d1d1d1; -webkit-box-shadow: 0 0 0 1.5px #d1d1d1; box-shadow: 0 0 0 1.5px #d1d1d1; } form { margin-bottom: 1em; display: block; margin-top: 0em; } .content { width: 94%; margin: auto; } .center { width: 100%; height: auto; float: left; } .content_header { width: 100%; height: auto; float: left; } .th { width:auto; padding-top:10px; height: 45px; float: left; border: solid 1px #000; border-left: none; text-align: center; } </style> <link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/<?=$jquery_ui_v?>/themes/<?=$jquery_ui_theme?>/jquery-ui.css" /> <link href="css/productionOrder.css" rel="stylesheet" type="text/css" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script> <script src="js/jqueryui_datepicker_thai.js"></script> <script type="text/javascript"> /***********************************************************************************************************************************************/ $(document).ready( function() { var currentProductionNumber = 0; // Create Button Click Event // 1. Create New Form Number // 2. Append New Form to main table $( "#btnCreate" ).click( function() { currentProductionNumber += 1; // plus new row number variable var html = '<tr >'; html += ' <td class="idproduction" >' + currentProductionNumber + '</td>'; html += ' <td class="number-production">'; html += ' <input type="text" name="totallinel'+currentProductionNumber+'" class="total'+currentProductionNumber+'">'; html += ' <br/><br/>'; html += ' <select name="select-production ' + currentProductionNumber + '" class="select-production" number-production="' +currentProductionNumber + '">'; html += ' <option value="0">Please Select a item</option>'; html += ' <option value="1">แผ่นครอบสันจั่ว ( Ridge Capping )</option>'; html += ' <option value="2">แผ่นครอบข้างหลังคา แบบ 1</option>'; html += ' </select>'; html += ' <br/><br/>'; html += ' <div id="img-product' + currentProductionNumber + '"></div>'; html += ' </td>'; html += ' <td class=textarea ><textarea rows=3 cols=9 id="erea" name="note"></textarea>'; html += ' </td>'; html += ' <td class=thickness > <input type="text" id="txtName2_1" >'; html += ' <input type="text" id="txtName2_2" > '; html += ' <input type="text" id="txtName2_3" >'; html += ' <input type="text" id="txtName2_4" >'; html += ' </td>'; html += ' <td class=length> <input type="text" id="txtName3_1" >'; html += ' <input type="text" id="txtName3_2" >'; html += ' <input type="text" id="txtName3_3" >'; html += ' <input type="text" id="txtName3_4" >'; html += ' </td>'; html += ' <td class=number > <input type="text" id="txtName4_1" >'; html += ' <input type="text" id="txtName4_2" >'; html += ' <input type="text" id="txtName4_3" >'; html += ' <input type="text" id="txtName4_4" >'; html += ' </td>'; html += '</tr>'; $( ".content_header" ).append( html ); }); // Select Product Image change event // Create Image Product // Get number-production for append to target position $( document ).on( "change", ".select-production", function() { var optionValue = $( this ).val(); if( optionValue == 0 ) { var imgProduction = ''; } else if( optionValue == 1 ) { var imgProduction = '<img src="product/1.png" id="Product-images" />' imgProduction += '<input type ="text" class="line" id="textline1_1'+currentProductionNumber+'" placeholder="0" >'; imgProduction += '<input type ="text" class="line" id="textline1_2'+currentProductionNumber+'" placeholder="0" >'; imgProduction += '<input type ="text" class="line" id="textline1_3'+currentProductionNumber+'" placeholder="0" >'; imgProduction += '<input type ="text" class="line" id="textline1_4'+currentProductionNumber+'" placeholder="0" >'; } else if( optionValue == 2 ) { var imgProduction = '<img src="product/2.png" id="Product-images" />'; imgProduction += '<input type ="text" class="line" id="textline2_1'+currentProductionNumber+'" placeholder="0" >'; imgProduction += '<input type ="text" class="line" id="textline2_2'+currentProductionNumber+'" placeholder="0" >'; imgProduction += '<input type ="text" class="line" id="textline2_3'+currentProductionNumber+'" placeholder="0" >'; imgProduction += '<input type ="text" class="line" id="textline2_4'+currentProductionNumber+'" placeholder="0" >'; } var tdId = $( this ).attr( "number-production" ); $( "#img-product" + tdId ).html( imgProduction ); }); $( document ).on( "keyup", ".line", function() { if (currentProductionNumber){ var width_line1 = $( "#textline1_1"+currentProductionNumber).val(); var width_line2 = $( "#textline1_2"+currentProductionNumber).val(); var width_line3 = $( "#textline1_3"+currentProductionNumber).val(); var width_line4 = $( "#textline1_4"+currentProductionNumber).val(); var total_linel = (width_line1*1) +(width_line2*1)+(width_line3*1)+(width_line4*1); $(".total" + currentProductionNumber ).val(total_linel); }else if(currentProductionNumber=currentProductionNumber){ var width_line5 = $( "#textline2_1"+currentProductionNumber).val(); var width_line6 = $( "#textline2_2"+currentProductionNumber).val(); var width_line7 = $( "#textline2_3"+currentProductionNumber).val(); var width_line8 = $( "#textline2_4"+currentProductionNumber).val(); var total_linel = (width_line5*1) +(width_line6*1)+(width_line7*1)+(width_line8*1); $(".total" + currentProductionNumber ).val(total_linel); } }); //////////////////////////////////////////////////////////Delete//////////////////////////////////////////////////////////////////////// $("#btnDelete").click(function(){ if($(".content_header tr").size()>0){ $(".content_header tr:last").remove(); currentProductionNumber -= currentProductionNumber; }else{ alert("ไม่เหลือรายการที่จะลบแล้ว"); } }); /************************************************************************************************************************************************/ }); </script> </head> <body> <div class="bottom"> <div class="a4"> <div class="page"> <form name="mainform" method="post" action="saveproductionOrder.php"> <div class="center"> <div class="content_header" > <div class="th" style="width:7%; padding-top:10px;">ลำดับ</div> <div class="th" style="width:40%; padding-top:10px;">รายละเอียด</div> <div class="th" style="width:12%; padding-top:10px;">สี</div> <div class="th" style="width:13.33%;padding-top:10px;">ความหนา<br />(มม.)</div> <div class="th" style="width:13.33%;padding-top:10px;">ความยาว<br />(เมตร)</div> <div class="th" style="width:13.33%;padding-top:10px;">จำนวน<br />(แผ่น/ชิ้น)</div> </div> <div class="currentProductionNumber"></div> <input id="btnCreate" type="button" value="+" /> <input id="btnDelete" type="button" value="-" /> </div> </div> <center><input name="submit" class="submit_admin" id="submit" type="submit" value="ยืนยัน" onclick="saveproductionOrder.php" /></center> </form> </div> </div> </div> </body> </html>
if (currentProductionNumber) { // เมื่อไม่เป็นเท็จ (จริงเสมอ) // ... } else if (currentProductionNumber = currentProductionNumber){ // จริงเสมอ // ... }
เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง
