Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,037

HOME > PHP > PHP Forum > ช่วยด้วยครับผมมีปัญหาเรื่อง jquery การใช้ function keyup และมีการใช้ปุ้มบวกเพื่อเพิ่มตารางด้วย

ช่วยด้วยครับผมมีปัญหาเรื่อง jquery การใช้ function keyup และมีการใช้ปุ้มบวกเพื่อเพิ่มตารางด้วย

เริ่มหัวข้อใหม่

โพสกระทู้ ( 18 )
บทความ ( 0 )

ผมทำเรื่องการบวกนำ้หนักสินค้าใน select โดยการเลือกรูปภาพแล้วภานในจะให้ใส่น้ำหนักสินค้าและนำตัวเลขทั้งหมดมารวมกันแสดงเหนือสินค้านั้นๆแต่พอผมกดเลือกสินค้าเพิ่มขึ้นมาอีกตัวกลับไม่นับผลรวมน้ำหนักให้ โดยที่ไม่สามารถกลับไปแก้สินค้าเก่าได้ ไม่ทราบว่าจะช่วยแก้ปัญหามีอยางไงดีครับ

Code (JavaScript)

<!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>

Tag : PHP, HTML/CSS, jQuery, JAVA

ประวัติการแก้ไข
2015-07-10 18:01:23
2015-07-11 10:24:07
2015-07-11 10:24:59

Date : 2015-07-10 17:59:12

By : chaiyan14731

View : 1058

Reply : 1

No. 1

พระยาเทพ

โพสกระทู้ ( 1,458 )
บทความ ( 0 )

ส่วนแสดงผลข้อมูลที่ดึงมาจาก database ต้องนำมาโพสต์ด้วย

จุดสังเกต เงื่อนไข if ใน keyup event

Code (JavaScript)

if (currentProductionNumber) { // เมื่อไม่เป็นเท็จ (จริงเสมอ)
    // ...
} else if (currentProductionNumber = currentProductionNumber){ // จริงเสมอ
    // ...
}

Date : 2020-06-04 21:12:31

By : PhrayaDev

ค้นหาข้อมูล

แสดงความคิดเห็น

Re : ช่วยด้วยครับผมมีปัญหาเรื่อง jquery การใช้ function keyup และมีการใช้ปุ้มบวกเพื่อเพิ่มตารางด้วย

รายละเอียด

เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง

โดย

อีเมล์

บวกค่าให้ถูก

<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)

Exchange: นำเข้าสินค้าจากจีน, Taobao, เฟอร์นิเจอร์, ของพรีเมี่ยม, ร่ม, ปากกา, power bank, แฟลชไดร์ฟ, กระบอกน้ำ

Load balance : Server 05

Registered : 109,037

document.write("<font color=996600>[PHP]</font>"); ช่วยด้วยครับผมมีปัญหาเรื่อง jquery การใช้ function keyup และมีการใช้ปุ้มบวกเพื่อเพิ่มตารางด้วย

No. 1

ค้นหาข้อมูล

อัพโหลดแทรกรูปภาพ

Notice

ช่วยด้วยครับผมมีปัญหาเรื่อง jquery การใช้ function keyup และมีการใช้ปุ้มบวกเพื่อเพิ่มตารางด้วย