Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 108,358

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



 

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

 



Topic : 117708



โพสกระทู้ ( 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
Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2015-07-10 17:59:12 By : chaiyan14731 View : 537 Reply : 1
 

 

No. 1



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



สถานะออฟไลน์
Twitter Facebook Blogger

ส่วนแสดงผลข้อมูลที่ดึงมาจาก 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 และมีการใช้ปุ้มบวกเพื่อเพิ่มตารางด้วย
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

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

Notice

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

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







Exchange: Voake, Comcube, รับทำเว็บไซต์ รับเขียนโปรแกรม , รับทำบัญชี , โรงงานผลิตครีม , สำนักงานบัญชี , รับจดทะเบียนบริษัท , Pangpond , รถมือสอง

Load balance : Server 05
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2020 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่