ด้วยสํานึกในพระมหากรุณาธิคุณสมเด็จพระนางเจ้าสิริกิติ์เป็นล้นพ้นอันหาที่สุดมิได้
ด้วยสํานึกในพระมหากรุณาธิคุณสมเด็จพระนางเจ้าสิริกิติ์เป็นล้นพ้นอันหาที่สุดมิได้


สอบถามเรื่องการคำนวณช่อง textbox แบบ clone ครับ

ถาม-ตอบ แนะนำไอเดีย โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา สอบถามเรื่องการคำนวณช่อง textbox แบบ clone ครับ

ปัจจุบัน นักพัฒนาสามารถ ใช้ ChatGPT | Gemini | Claude | Perplexity | Deepseek ช่วยในการแก้ไขปัญหาต่างๆ ในการเขียนโปรแกรม หรือหาข้อมูลเพิ่มเติมได้ง่ายและสะดวก แนะนำให้ทุกคนใช้งานเพื่อพัฒนาศักยภาพของตัวเอง

สอบถามเรื่องการคำนวณช่อง textbox แบบ clone ครับ


ผมลองทำแล้วครับ
แต่ยังไม่ได้เลยครับ
ผมกรอกตัวเลขในช่อง textbox กรอบสีเหลืองกับกรอบสีแดงแล้วนำค่ารวมกันไปไว้ที่กรอบสีเขียวครับ
ขอคำแนะนำดว้ยนะครับ
ช่องในกรอบสีแดงเป็นช้อง textbox ที่clone นะครับไม่ใช่ช่องที่มีอยู่ก่อนแล้ว
ขอบคุณครับ


Maxtri 26-09-2016 09:55:11

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • CAPTCHA Image
    Play CAPTCHA Audio
    Refresh Image


    ( หรือ เข้าใช้งานผ่าน Social Login )

 ความคิดเห็นที่ 1
  ขึ้นกับว่าเขียนโค้ดไว้รูปแบบไหน


ninenik 26-09-2016
 ความคิดเห็นที่ 2
$(document).ready(function(e) {
                $("input").change(function () {
                    var toplam = 0;
                    $("input[name=name168]").each(function () {
                        toplam = toplam + parseFloat($(this).val());
                    }) 
                    $("input[name=name171]").each(function () {
                        toplam = toplam + parseFloat($(this).val());
                    })
$("input[name=name165]").each(function () {
                        toplam = toplam + parseFloat($(this).val());
                    })
$("input[name=name003]").each(function () {
                        toplam = toplam + parseInt($(this).val());
                    })
$("input[name=name006]").each(function () {
                        toplam = toplam + parseInt($(this).val());
                    })
$("input[name=name009]").each(function () {
                        toplam = toplam + parseInt($(this).val());
                    })
                    $("input[name=adhtotal2]").val(toplam.toFixed(2));
                    
            });
         });

เขียนไว้แบบนี้ครับ
แต่ 3 ส่วนแรกคำนวนได้ปกติ
แต่พอถึงชื่อตัวแปร name003 - name006 - name009 มันไม่ยอมคำนวนให้ครับ
มันแจ้งขึ้นว่าเป็น Arrary ครับ
ไม่ทราบว่าเกิดจากอะไรหรอครับ
ทั้งๆที่สูตรคำนวนผมทดสอบแล้วปกติครับ
3 ตัวแปรที่บอกไปเป็นในส่วนของ +เพิ่มบรรทัดครับ 
คือการเพิ่มแถวของ textbox ขึ้นมาครับ
แล้วนำมาคำนวณครับ
ขอบคุณครับ


maxtri 27-09-2016 08:42
 ความคิดเห็นที่ 3
  แนะนำไม่ถูก คงต้องไปประยุกต์เอา และอีกอย่าง เรียนรู้วิธีการใหม่ๆ ไว้จะทำให้เห็นทางแก้ได้เยอะขึ้น

ลองดูเนื้อหานี้เป็นแนวทาง

ประยุกต์รวมข้อมูลแถวในตาราง ด้วย jquery ร่วมกับ data attribute 

ประยุกต์ร่วมกับ 

การเพิ่ม ลบ แก้ไข ข้อมูล กับ รายการ clone() ด้วย jquery 

จะได้ประมาณนี้

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
	
<br>
<br>
<div class="container" style="margin:auto; width:800px;">
    <table id="myTbl"  class="table table-bordered">
    	    	        <tr class="cssTR">
            <td class="text-center">
            <input type="text" name="" id="" class="text-center css_input css_input1" data-number="111.25" style="width:100px;" value="111.25">
            </td>
            <td class="text-center">
            <input type="text" name="" id="" class="text-center css_input css_input2" data-number="110.00" style="width:100px;" value="110.00">
            </td>
            <td class="text-center">
            <input type="text" name="" id="" class="text-center css_input3" data-number="0.00" style="width:100px;" value="0.00" readonly>
            </td>
            <td class="text-center">
            <input type="text" name="" id="" class="text-center css_input css_input4" data-number="1.00"  style="width:100px;" value="1.00">
            </td>    
            <td class="text-center">
            <input type="text" name="" id="" class="text-center css_input5" data-number="0.00" style="width:100px;" value="0.00"  readonly>
            </td>                                                
        </tr>
        	        <tr class="cssTR">
            <td class="text-center">
            <input type="text" name="" id="" class="text-center css_input css_input1" data-number="211.75" style="width:100px;" value="211.75">
            </td>
            <td class="text-center">
            <input type="text" name="" id="" class="text-center css_input css_input2" data-number="120.00" style="width:100px;" value="120.00">
            </td>
            <td class="text-center">
            <input type="text" name="" id="" class="text-center css_input3" data-number="0.00" style="width:100px;" value="0.00" readonly>
            </td>
            <td class="text-center">
            <input type="text" name="" id="" class="text-center css_input css_input4" data-number="2.00"  style="width:100px;" value="2.00">
            </td>    
            <td class="text-center">
            <input type="text" name="" id="" class="text-center css_input5" data-number="0.00" style="width:100px;" value="0.00"  readonly>
            </td>                                                
        </tr>
        	        <tr class="cssTR">
            <td class="text-center">
            <input type="text" name="" id="" class="text-center css_input css_input1" data-number="312.25" style="width:100px;" value="312.25">
            </td>
            <td class="text-center">
            <input type="text" name="" id="" class="text-center css_input css_input2" data-number="130.00" style="width:100px;" value="130.00">
            </td>
            <td class="text-center">
            <input type="text" name="" id="" class="text-center css_input3" data-number="0.00" style="width:100px;" value="0.00" readonly>
            </td>
            <td class="text-center">
            <input type="text" name="" id="" class="text-center css_input css_input4" data-number="3.00"  style="width:100px;" value="3.00">
            </td>    
            <td class="text-center">
            <input type="text" name="" id="" class="text-center css_input5" data-number="0.00" style="width:100px;" value="0.00"  readonly>
            </td>                                                
        </tr>
        
        <tr>
            <td class="text-center">
            
            </td>
            <td class="text-center">
            
            </td>
            <td class="text-center bg-success">
            <input type="text" name="total_one" id="total_one" class="text-center" style="width:100px;" value="0.00"  readonly>
            </td>
            <td class="text-center">
            
            </td>    
            <td class="text-center bg-success">
            <input type="text" name="total_two" id="total_two" class="text-center" style="width:100px;"  value="0.00"  readonly>
            </td>                                                
        </tr>
    </table>   
    <br />  
<table width="500" border="0" cellspacing="0" cellpadding="0">  
  <tr>  
    <td>  
    <button id="addRow" type="button">+</button>    
    &nbsp;  
    <button id="removeRow" type="button">-</button>  
    &nbsp;  
    &nbsp;  
    &nbsp;  
    <input type="submit" name="Submit" id="Submit" value="Submit" /></td>  
  </tr>  
</table>   
</div>




<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>      
<script type="text/javascript">
$(function(){


	// ฟังก์ชั่นสำหรับค้นและแทนที่ทั้งหมด
	String.prototype.replaceAll = function(search, replacement) {
		var target = this;
		return target.replace(new RegExp(search, 'g'), replacement);
	};	

	var formatMoney = function(inum){  // ฟังก์ชันสำหรับแปลงค่าตัวเลขให้อยู่ในรูปแบบ เงิน  
		var s_inum=new String(inum);  
		var num2=s_inum.split(".");  
		var n_inum="";  
		if(num2[0]!=undefined){
			var l_inum=num2[0].length;  
			for(i=0;i<l_inum;i++){  
				if(parseInt(l_inum-i)%3==0){  
					if(i==0){  
						n_inum+=s_inum.charAt(i);         
					}else{  
						n_inum+=","+s_inum.charAt(i);         
					}     
				}else{  
					n_inum+=s_inum.charAt(i);  
				}  
			}  
		}else{
			n_inum=inum;
		}
		if(num2[1]!=undefined){  
			n_inum+="."+num2[1];  
		}
		return n_inum;  
	}  

	// ถ้าคลิกเลือก textbox ที่ต้องการให้ select ข้อความนั้นทันที เพื่อที่จะแก้ไขหรือลบได้เลบ
	$(".css_input").on("click",function(){
		$(this).select();
	});
	
	// อนุญาติให้กรอกได้เฉพาะตัวเลข 0-9 จุด และคอมม่า 
	$(".css_input").on("keypress",function(e){
		var eKey = e.which || e.keyCode;
		if((eKey<48 || eKey>57) && eKey!=46 && eKey!=44){
			return false;
		}
	});	
	
	// ถ้ามีการเปลี่ยนแปลง textbox ที่มี css class ชื่อ css_input1 ใดๆ 
	$(".css_input").on("change",function(){
		var thisVal=$(this).val(); // เก็บค่าที่เปลี่ยนแปลงไว้ในตัวแปร
		if(thisVal.replace(",","")){ // ถ้ามีคอมม่า (,)
			thisVal=thisVal.replaceAll(",",""); // แทนค่าคอมม่าเป้นค่าว่างหรือก็คือลบคอมม่า
			thisVal = parseFloat(thisVal);	// แปลงเป็นรูปแบบตัวเลข						
		}else{ // ถ้าไม่มีคอมม่า
			thisVal = parseFloat(thisVal); // แปลงเป็นรูปแบบตัวเลข			
		}		
		thisVal=thisVal.toFixed(2);// แปลงค่าที่กรอกเป้นทศนิยม 2 ตำแหน่ง
		$(this).data("number",thisVal); // นำค่าที่จัดรูปแบบไม่มีคอมม่าเก็บใน data-number
		$(this).val(formatMoney(thisVal));// จัดรูปแบบกลับมีคอมม่าแล้วแสดงใน textbox นั้น

		var total_sum_C=0; // ทุกครั้งที่มีการเปลี่ยนแปลงค่า textbox ให้ค่ารวมเป็น 0
		$(".css_input3").each(function(i,k){ //  วนลูป textbox
			// นำค่าใน data-number ซื่องไม่มีคอมม่า มาไว้ในตัวแปร สำหรับ บวกเพิ่ม
			var data_A = $(".css_input1").eq(i).data("number"); 
			var data_B = $(".css_input2").eq(i).data("number"); 
			var data_C = parseFloat(data_A)+parseFloat(data_B);
			data_C=data_C.toFixed(2);// แปลงค่าที่กรอกเป้นทศนิยม 2 ตำแหน่ง
			$(".css_input3").eq(i).data("number",data_C); 
			$(".css_input3").eq(i).val(formatMoney(data_C)); 
			
			var data_item=$(".css_input3").eq(i).data("number"); 
			// บวกค่า data_item เข้าไปในผลรวม total_sum_data
			total_sum_C=parseFloat(total_sum_C)+parseFloat(data_item);
		});		
		total_sum_C=total_sum_C.toFixed(2); // จัดรูปแบบแปลงทศนิยมเป็น 2 ตำแหน่ง
		// จัดรูปแบบกลับมีคอมม่าแล้วแสดงใน textbox ที่เป็นผลรวม 
		$("#total_one").val(formatMoney(total_sum_C));
		
		var total_sum_E=0; // ทุกครั้งที่มีการเปลี่ยนแปลงค่า textbox ให้ค่ารวมเป็น 0
		$(".css_input5").each(function(i,k){ //  วนลูป textbox
			// นำค่าใน data-number ซื่องไม่มีคอมม่า มาไว้ในตัวแปร สำหรับ บวกเพิ่ม
			var data_C = $(".css_input3").eq(i).data("number"); 
			var data_D = $(".css_input4").eq(i).data("number"); 
			var data_E = parseFloat(data_C)*parseFloat(data_D);
			data_E=data_E.toFixed(2);// แปลงค่าที่กรอกเป้นทศนิยม 2 ตำแหน่ง
			$(".css_input5").eq(i).data("number",data_E); 
			$(".css_input5").eq(i).val(formatMoney(data_E)); 
			
			var data_item=$(".css_input5").eq(i).data("number"); 
			// บวกค่า data_item เข้าไปในผลรวม total_sum_data
			total_sum_E=parseFloat(total_sum_E)+parseFloat(data_item);
		});		
		total_sum_E=total_sum_E.toFixed(2); // จัดรูปแบบแปลงทศนิยมเป็น 2 ตำแหน่ง
		// จัดรูปแบบกลับมีคอมม่าแล้วแสดงใน textbox ที่เป็นผลรวม 
		$("#total_two").val(formatMoney(total_sum_E));
				
	});
	$(".css_input:eq(0)").trigger("change");// กำหนดเมื่อโหลด ทำงานหาผลรวมทันที	

    $("#addRow").click(function(){  
        // ส่วนของการ clone ข้อมูลด้วย jquery clone() ค่า true คือ  
        // การกำหนดให้ ไม่ต้องมีการ ดึงข้อมูลจากค่าเดิมมาใช้งาน  
        // รีเซ้ตเป็นค่าว่าง ถ้ามีข้อมูลอยู่แล้ว ทั้ง select หรือ input  
        $(".cssTR:eq(0)").clone(true)   
        .find("input").attr("value","0").end()  
        .find("input").data("number","0.00").end()  		
        .find("select").attr("value","").end()  
        .insertAfter($("#myTbl tr.cssTR:last"));  
		
		$(".css_input:eq(0)").trigger("change");// กำหนดเมื่อโหลด ทำงานหาผลรวมทันที	
    });  
    $("#removeRow").click(function(){  
        // // ส่วนสำหรับการลบ  
        if($("#myTbl tr.cssTR").size()>1){ // จะลบรายการได้ อย่างน้อย ต้องมี 1 รายการ  
            $("#myTbl tr.cssTR:last").remove(); // ลบรายการสุดท้าย  
        }else{  
            // เหลือ 1 รายการลบไม่ได้  
            alert("ต้องมีรายการข้อมูลอย่างน้อย 1 รายการ");  
        }  
    });   

});
</script>

    
</body>
</html>




ตัวอย่าง


       


ninenik 27-09-2016
 ความคิดเห็นที่ 4
ขอบคุนครับ


maxtri 28-09-2016 14:55
 ความคิดเห็นที่ 5
สอบถามเพิ่มเติมครับ
ถ้าหาผลรวมจากการ clone textbox แล้วเราจะทราบชื่อตัวแปรได้อย่างไรครับ
เพราะว่าถ้าคำนวณเสร๋จแล้วผมต้องการจะเก็บค่าตัวแปรของ clone textbox ที่ clone ขึ้นมาทีละชุด
และเก็บลงฐานข้อมูลนะครับ
ต้องกำหนดตัวแปรไว้ตรงไหนครับ
ขอบคุณครับ


maxtri 28-09-2016 15:31
 ความคิดเห็นที่ 6
ตัวแปรที่จะไปใช้ใน php กำหนดใน name="" โดยให้กำหนดชื่อเป็น array ชื่อต่างกันตามคอลัมน์
เช่น name="data1[]"  
name="data2[]"

ส่วนการนำค่าข้อมูลไปบันทึก ก็ประมาณบทความนี้

แนวทางการส่งค่า จาก checkbox เพื่อบันทึกข้อมูลแบบ array ใน php 


ninenik 28-09-2016
 ความคิดเห็นที่ 7
สอบถามนิดหน่อยครับผม
จากโค๊ดด้านล่างนี้ ถ้าผมต้องการให้มัน clone textbox เองได้แล้ว
ผมต้องการให้มันกำหนดชื่อเองจะได้ไหมครับ
พอเรากด +เพิ่มบรรทัด ก็จะให้มันเปลี่ยนชื่อเองครับ
เช่น ชื่อเดิม  na1-na2-na3  พอเราเพิ่มบรรทัดเสร็จ มันก็จะได้เพิ่มมาอีกบรรทัด และชื่อว่า na4 - na5 - na6 แบบนี้ได้หรือเปล่าครับ

<script type="text/javascript">
        $("#addRow").click(function(){    
        // ส่วนของการ clone ข้อมูลด้วย jquery clone() ค่า true คือ    
        // การกำหนดให้ ไม่ต้องมีการ ดึงข้อมูลจากค่าเดิมมาใช้งาน    
        // รีเซ้ตเป็นค่าว่าง ถ้ามีข้อมูลอยู่แล้ว ทั้ง select หรือ input    
        $(".cssTR:eq(0)").clone(true)     
        .find("input").attr("value","0.00").end()    
        .find("input").data("number","").end()            
        .find("select").attr("value","").end() 
        .insertAfter($("#myTbl tr.cssTR:last"));  //บรรทัดเพิ่มแถวของเดิมที่มีอยู่    
          
        $(".css_input:eq(0)").trigger("change");// กำหนดเมื่อโหลด ทำงานหาผลรวมทันที   
    });    
        </script>

ต้องเขียนโค๊ดอะไรแทรกเข้าไปในคำสั่ง โคีดด้านบนนี้หรือป่าวครับ
ขอคำแนะนำด้วยนะครับ
ตันแล้วครับ ลองแก้หมดแล้วครับ
ขอบคุณครับ


maxtri 29-09-2016 10:01
 ความคิดเห็นที่ 8
เราสามารถใช้ชื่อเป็น array แล้วนำไปใช้งานได้ ถ้าเข้าใจวิธีการ โดยไม่ต้องสนใจว่าชื่อนั้นจะต่างกันหรือไม่
แต่ถ้าต้องการกำหนดชื่อเป็นแบบต่างกัน สามารถปรับได้อย่างง่าย ดังนี้


<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
	
<br>
<br>
<div class="container" style="margin:auto; width:800px;">
    <table id="myTbl"  class="table table-bordered">
    	    	        <tr class="cssTR">
            <td class="text-center">
            <input type="text" name="myinput1" id="" class="text-center css_input css_input1" data-number="111.25" style="width:100px;" value="111.25">
            </td>
            <td class="text-center">
            <input type="text" name="myinput2" id="" class="text-center css_input css_input2" data-number="110.00" style="width:100px;" value="110.00">
            </td>
            <td class="text-center">
            <input type="text" name="myinput3" id="" class="text-center css_input3" data-number="0.00" style="width:100px;" value="0.00" readonly>
            </td>
            <td class="text-center">
            <input type="text" name="myinput4" id="" class="text-center css_input css_input4" data-number="1.00"  style="width:100px;" value="1.00">
            </td>    
            <td class="text-center">
            <input type="text" name="myinput5" id="" class="text-center css_input5" data-number="0.00" style="width:100px;" value="0.00"  readonly>
            </td>                                                
        </tr>
        	        <tr class="cssTR">
            <td class="text-center">
            <input type="text" name="myinput6" id="" class="text-center css_input css_input1" data-number="211.75" style="width:100px;" value="211.75">
            </td>
            <td class="text-center">
            <input type="text" name="myinput7" id="" class="text-center css_input css_input2" data-number="120.00" style="width:100px;" value="120.00">
            </td>
            <td class="text-center">
            <input type="text" name="myinput8" id="" class="text-center css_input3" data-number="0.00" style="width:100px;" value="0.00" readonly>
            </td>
            <td class="text-center">
            <input type="text" name="myinput9" id="" class="text-center css_input css_input4" data-number="2.00"  style="width:100px;" value="2.00">
            </td>    
            <td class="text-center">
            <input type="text" name="myinput10" id="" class="text-center css_input5" data-number="0.00" style="width:100px;" value="0.00"  readonly>
            </td>                                                
        </tr>
        	        <tr class="cssTR">
            <td class="text-center">
            <input type="text" name="myinput11" id="" class="text-center css_input css_input1" data-number="312.25" style="width:100px;" value="312.25">
            </td>
            <td class="text-center">
            <input type="text" name="myinput12" id="" class="text-center css_input css_input2" data-number="130.00" style="width:100px;" value="130.00">
            </td>
            <td class="text-center">
            <input type="text" name="myinput13" id="" class="text-center css_input3" data-number="0.00" style="width:100px;" value="0.00" readonly>
            </td>
            <td class="text-center">
            <input type="text" name="myinput14" id="" class="text-center css_input css_input4" data-number="3.00"  style="width:100px;" value="3.00">
            </td>    
            <td class="text-center">
            <input type="text" name="myinput15" id="" class="text-center css_input5" data-number="0.00" style="width:100px;" value="0.00"  readonly>
            </td>                                                
        </tr>
        
        <tr>
            <td class="text-center">
            
            </td>
            <td class="text-center">
            
            </td>
            <td class="text-center bg-success">
            <input type="text" name="total_one" id="total_one" class="text-center" style="width:100px;" value="0.00"  readonly>
            </td>
            <td class="text-center">
            
            </td>    
            <td class="text-center bg-success">
            <input type="text" name="total_two" id="total_two" class="text-center" style="width:100px;"  value="0.00"  readonly>
            </td>                                                
        </tr>
    </table>   
    <br />  
<table width="500" border="0" cellspacing="0" cellpadding="0">  
  <tr>  
    <td>  
    <button id="addRow" type="button">+</button>    
    &nbsp;  
    <button id="removeRow" type="button">-</button>  
    &nbsp;  
    &nbsp;  
    &nbsp;  
    <input type="submit" name="Submit" id="Submit" value="Submit" /></td>  
  </tr>  
</table>   
</div>




<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>      
<script type="text/javascript">
$(function(){


	// ฟังก์ชั่นสำหรับค้นและแทนที่ทั้งหมด
	String.prototype.replaceAll = function(search, replacement) {
		var target = this;
		return target.replace(new RegExp(search, 'g'), replacement);
	};	

	var formatMoney = function(inum){  // ฟังก์ชันสำหรับแปลงค่าตัวเลขให้อยู่ในรูปแบบ เงิน  
		var s_inum=new String(inum);  
		var num2=s_inum.split(".");  
		var n_inum="";  
		if(num2[0]!=undefined){
			var l_inum=num2[0].length;  
			for(i=0;i<l_inum;i++){  
				if(parseInt(l_inum-i)%3==0){  
					if(i==0){  
						n_inum+=s_inum.charAt(i);         
					}else{  
						n_inum+=","+s_inum.charAt(i);         
					}     
				}else{  
					n_inum+=s_inum.charAt(i);  
				}  
			}  
		}else{
			n_inum=inum;
		}
		if(num2[1]!=undefined){  
			n_inum+="."+num2[1];  
		}
		return n_inum;  
	}  

	// ถ้าคลิกเลือก textbox ที่ต้องการให้ select ข้อความนั้นทันที เพื่อที่จะแก้ไขหรือลบได้เลบ
	$(".css_input").on("click",function(){
		$(this).select();
	});
	
	// อนุญาติให้กรอกได้เฉพาะตัวเลข 0-9 จุด และคอมม่า 
	$(".css_input").on("keypress",function(e){
		var eKey = e.which || e.keyCode;
		if((eKey<48 || eKey>57) && eKey!=46 && eKey!=44){
			return false;
		}
	});	
	
	// ถ้ามีการเปลี่ยนแปลง textbox ที่มี css class ชื่อ css_input1 ใดๆ 
	$(".css_input").on("change",function(){
		var thisVal=$(this).val(); // เก็บค่าที่เปลี่ยนแปลงไว้ในตัวแปร
		if(thisVal.replace(",","")){ // ถ้ามีคอมม่า (,)
			thisVal=thisVal.replaceAll(",",""); // แทนค่าคอมม่าเป้นค่าว่างหรือก็คือลบคอมม่า
			thisVal = parseFloat(thisVal);	// แปลงเป็นรูปแบบตัวเลข						
		}else{ // ถ้าไม่มีคอมม่า
			thisVal = parseFloat(thisVal); // แปลงเป็นรูปแบบตัวเลข			
		}		
		thisVal=thisVal.toFixed(2);// แปลงค่าที่กรอกเป้นทศนิยม 2 ตำแหน่ง
		$(this).data("number",thisVal); // นำค่าที่จัดรูปแบบไม่มีคอมม่าเก็บใน data-number
		$(this).val(formatMoney(thisVal));// จัดรูปแบบกลับมีคอมม่าแล้วแสดงใน textbox นั้น

		var total_sum_C=0; // ทุกครั้งที่มีการเปลี่ยนแปลงค่า textbox ให้ค่ารวมเป็น 0
		$(".css_input3").each(function(i,k){ //  วนลูป textbox
			// นำค่าใน data-number ซื่องไม่มีคอมม่า มาไว้ในตัวแปร สำหรับ บวกเพิ่ม
			var data_A = $(".css_input1").eq(i).data("number"); 
			var data_B = $(".css_input2").eq(i).data("number"); 
			var data_C = parseFloat(data_A)+parseFloat(data_B);
			data_C=data_C.toFixed(2);// แปลงค่าที่กรอกเป้นทศนิยม 2 ตำแหน่ง
			$(".css_input3").eq(i).data("number",data_C); 
			$(".css_input3").eq(i).val(formatMoney(data_C)); 
			
			var data_item=$(".css_input3").eq(i).data("number"); 
			// บวกค่า data_item เข้าไปในผลรวม total_sum_data
			total_sum_C=parseFloat(total_sum_C)+parseFloat(data_item);
		});		
		total_sum_C=total_sum_C.toFixed(2); // จัดรูปแบบแปลงทศนิยมเป็น 2 ตำแหน่ง
		// จัดรูปแบบกลับมีคอมม่าแล้วแสดงใน textbox ที่เป็นผลรวม 
		$("#total_one").val(formatMoney(total_sum_C));
		
		var total_sum_E=0; // ทุกครั้งที่มีการเปลี่ยนแปลงค่า textbox ให้ค่ารวมเป็น 0
		$(".css_input5").each(function(i,k){ //  วนลูป textbox
			// นำค่าใน data-number ซื่องไม่มีคอมม่า มาไว้ในตัวแปร สำหรับ บวกเพิ่ม
			var data_C = $(".css_input3").eq(i).data("number"); 
			var data_D = $(".css_input4").eq(i).data("number"); 
			var data_E = parseFloat(data_C)*parseFloat(data_D);
			data_E=data_E.toFixed(2);// แปลงค่าที่กรอกเป้นทศนิยม 2 ตำแหน่ง
			$(".css_input5").eq(i).data("number",data_E); 
			$(".css_input5").eq(i).val(formatMoney(data_E)); 
			
			var data_item=$(".css_input5").eq(i).data("number"); 
			// บวกค่า data_item เข้าไปในผลรวม total_sum_data
			total_sum_E=parseFloat(total_sum_E)+parseFloat(data_item);
		});		
		total_sum_E=total_sum_E.toFixed(2); // จัดรูปแบบแปลงทศนิยมเป็น 2 ตำแหน่ง
		// จัดรูปแบบกลับมีคอมม่าแล้วแสดงใน textbox ที่เป็นผลรวม 
		$("#total_two").val(formatMoney(total_sum_E));
				
	});
	$(".css_input:eq(0)").trigger("change");// กำหนดเมื่อโหลด ทำงานหาผลรวมทันที	

    $("#addRow").click(function(){  
        // ส่วนของการ clone ข้อมูลด้วย jquery clone() ค่า true คือ  
        // การกำหนดให้ ไม่ต้องมีการ ดึงข้อมูลจากค่าเดิมมาใช้งาน  
        // รีเซ้ตเป็นค่าว่าง ถ้ามีข้อมูลอยู่แล้ว ทั้ง select หรือ input  
		var nowLength = $(".cssTR").length;
		var name_no=nowLength*5;
        $(".cssTR:eq(0)").clone(true)   
        .find("input").attr("value","0").end()  
        .find("input").data("number","0.00").end()  		
		.find("input:eq(0)").attr("name","myinput"+(name_no+1)).end()
		.find("input:eq(1)").attr("name","myinput"+(name_no+2)).end()
		.find("input:eq(2)").attr("name","myinput"+(name_no+3)).end()
		.find("input:eq(3)").attr("name","myinput"+(name_no+4)).end()
		.find("input:eq(4)").attr("name","myinput"+(name_no+5)).end()								
        .find("select").attr("value","").end()  
        .insertAfter($("#myTbl tr.cssTR:last"));  
		
		$(".css_input:eq(0)").trigger("change");// กำหนดเมื่อโหลด ทำงานหาผลรวมทันที	
    });  
    $("#removeRow").click(function(){  
        // // ส่วนสำหรับการลบ  
        if($("#myTbl tr.cssTR").size()>1){ // จะลบรายการได้ อย่างน้อย ต้องมี 1 รายการ  
            $("#myTbl tr.cssTR:last").remove(); // ลบรายการสุดท้าย  
        }else{  
            // เหลือ 1 รายการลบไม่ได้  
            alert("ต้องมีรายการข้อมูลอย่างน้อย 1 รายการ");  
        }  
    });   

});
</script>

    
</body>
</html>


ninenik 29-09-2016
 ความคิดเห็นที่ 9
ขอบคุนครับ พี่นิก
เดี๋ยวผมขอนำไปศึกษาก่อนนะครับ


maxtri 29-09-2016 15:30
 ความคิดเห็นที่ 10
สอบถามอีกข้อครับผม
ขอโทดครับที่ผมถามเยอะไปหน่อยครับผม

ตอนนี้ผมลองแล้วสามารถเพิ่มข้อมูลลงฐานข้อมุลได้ครับ
แถวที่ถูกเพิ่มเข้ามาสามารถเพิ่มข้อูลได้ปกติครับ
แต่ผมอยากทราบว่าแถวที่ถูกเพิ่มเข้ามานั้น 
ถ้าผมอยากจะดึงค่าในฟิล์ของฐานข้อมูลออกมาโชว์แถวที่เพิ่มมา
สามารถดึงข้อมูลออกมาโชว์ได้ไหมครับ
ขอบคุนครับ


maxtri 29-09-2016 16:27
1







สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet
หรือ
Terms of Service | Privacy Policy
Author
2026 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ