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

Registered : 109,037

HOME > Client Script Forum > รบกวนหน่อยค่ะ inputค่าแบบArray ต้องการเอาค่า input มาบวกกันและแสดงค่าทันที ตามรูป ต้องเขียนสคริปยังไงคะ ตามcodeด้านล่างมันจะบวกแค่ช่องแรกค่ะ



 

รบกวนหน่อยค่ะ inputค่าแบบArray ต้องการเอาค่า input มาบวกกันและแสดงค่าทันที ตามรูป ต้องเขียนสคริปยังไงคะ ตามcodeด้านล่างมันจะบวกแค่ช่องแรกค่ะ

 



Topic : 136576



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



สถานะออฟไลน์




รบกวนหน่อยค่ะ inputค่าแบบArray ต้องการเอาค่า input มาบวกกันและแสดงค่าทันที ตามรูป ต้องเขียนสคริปยังไงคะ
ตามcodeด้านล่างมันจะบวกแค่ช่องแรกค่ะ
test

Code (PHP)
while($row ){
<tr>
<td><input type="text"  id="input1" name="input1[]"  OnKeyup="sum1_2();" ></td>
<td><input type="text"  id="input2" name="input2[]"  OnKeyup="sum1_2();" ></td>
<td><input type="text"  id="input3" name="input3[]"  OnKeyup="sum1_2();" ></td>
</tr>
}
<script>
  function sum1_2() { 
      
       var input_1= Number(document.getElementById('input1').value);
       var input_2= Number(document.getElementById('input2').value);
       var a = input_1+ input_2;
           document.getElementById('input3').value = a;
          
  } 
</script>




Tag : Ms SQL Server 2008, JavaScript, Action Script, jQuery, XAMPP







Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2022-02-02 07:51:05 By : mewhappy View : 785 Reply : 8
 

 

No. 1



โพสกระทู้ ( 9,586 )
บทความ ( 2 )



สถานะออฟไลน์


Code (PHP)
while($row ){
<tr>
<td><input type="text"  id="input1" name="input1[]" class=c1 OnKeyup="sum1_2(this);" ></td>
<td><input type="text"  id="input2" name="input2[]" class=c2 OnKeyup="sum1_2(this);" ></td>
<td><input type="text"  id="input3" name="input3[]" ></td>
</tr>
}
<script>
function sum1_2(obj) { 
	let c1,c2;
	if( obj.classList.contains('c1')){
		c1 = obj; c2=obj.parentElement.nextSibling.childnodes[0];			
	}else{
		c1 = obj.parentElement.previousSibling.childnodes[0]; c2=obj;
	}
 	c2.parentElement.nextSibling.childnodes[0].value = (c1.value-0) + (c2.value-0);          
  } 
</script>









ประวัติการแก้ไข
2022-02-02 08:11:41
2022-02-02 08:16:31
2022-02-02 08:23:11
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2022-02-02 08:10:25 By : Chaidhanan
 


 

No. 2



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



สถานะออฟไลน์


ตอบความคิดเห็นที่ : 1 เขียนโดย : Chaidhanan เมื่อวันที่ 2022-02-02 08:10:25
รายละเอียดของการตอบ ::
ไม่ได้ค่ะ
sd

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2022-02-02 08:42:44 By : mewhappy
 

 

No. 4



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



สถานะออฟไลน์


ตอบความคิดเห็นที่ : 3 เขียนโดย : mr.v เมื่อวันที่ 2022-02-02 09:41:56
รายละเอียดของการตอบ ::
รบกวนหน่อยนะคะ
คือผลลัพที่ต้องการคือตามภาพ
ลองเอาไปปรับใช้ กะลองให้เลขแสดงแล้วจะปรับเพิ่มการหารเข้าไป พอเอาไปใส่ในไฟล์แล้วเลขบวกกันไม่ขึ้น
ty
Code (PHP)
<tr>
<td style="vertical-align: middle;"> 
<input type="text" class="form-control" class=c1  style="text-align:center; vertical-align: middle;" data-toggle="tooltip" data-placement="top"  data-html="true" id="num1_1" name="num1_1[]" onKeyPress="CheckNum()"  OnKeyup="sum_b1(this);"  autocomplete="off"   MaxLength="1" value="" >
</td>
<td style="vertical-align: middle;"> 
<input type="text" class="form-control"  class=c2 style="text-align:center; vertical-align: middle;" data-toggle="tooltip" data-placement="top"  data-html="true" id="num1_2" name="num1_2[]" onKeyPress="CheckNum()"  OnKeyup="sum_b1(this);"  autocomplete="off"   MaxLength="1" value="" >
</td>
<td  style="vertical-align: middle;">
<input type="text" class="form-control" class=s1  style="text-align:center; vertical-align: middle;" data-toggle="tooltip" data-placement="top"  data-html="true" id="SUM_1" name="SUM_1[]"      autocomplete="off"  MaxLength="1" value=" " readonly>
</td>
<td style="vertical-align: middle;"> 
<input type="text" class="form-control" class=c3  style="text-align:center; vertical-align: middle;" data-toggle="tooltip" data-placement="top"  data-html="true" id="num2_1" name="num2_1[]" onKeyPress="CheckNum()"  OnKeyup="sum_b1(this);"  autocomplete="off"   MaxLength="1" value="" >
</td>
<td style="vertical-align: middle;"> 
<input type="text" class="form-control" class=c4  style="text-align:center; vertical-align: middle;" data-toggle="tooltip" data-placement="top"  data-html="true" id="num2_2" name="num2_2[]" onKeyPress="CheckNum()"  OnKeyup="sum_b1(this);"  autocomplete="off"   MaxLength="1" value="" >
</td>
<td  style="vertical-align: middle;">
<input type="text" class="form-control" class=s2 style="text-align:center; vertical-align: middle;" data-toggle="tooltip" data-placement="top"  data-html="true"
id="SUM_2" name="SUM_2[]"      autocomplete="off"   MaxLength="1" value=" " readonly>
</td>
<td  style="vertical-align: middle;">
<input type="text" class="form-control" style="text-align:center; vertical-align: middle;" data-toggle="tooltip" data-placement="top"  data-html="true"
id="SUM1_2" name="SUM1_2[]"      autocomplete="off"   MaxLength="1" value=" " readonly>
</td>
 </tr>
 <script> 
function sum_b1(obj) {
    let c1, c2 ;
    console.log('obj?', obj.parentElement.nextElementSibling.childNodes[0]);
    if (obj.classList.contains('c1')) {
        c1 = obj;
        c2 = obj.parentElement.nextElementSibling.childNodes[0];
    } else {
        c1 = obj.parentElement.previousElementSibling.childNodes[0];
        c2 = obj;
    }
 
     document.getElementById('SUM_1[]').value = c2.parentElement.nextElementSibling.childNodes[0].value = (c1.value - 0) + (c2.value - 0);
}
</script>


แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2022-02-02 11:23:54 By : mewhappy
 


 

No. 5



โพสกระทู้ ( 9,586 )
บทความ ( 2 )



สถานะออฟไลน์


ขอโทษ Mr.V ด้วยครับ จะกดขอบคุณดันไปกด delete เบลอครับ ขอโทษอย่างสูง

Mr.V อุตส่าห์แก้โค๊ดผม ที่สะกดผิด ให้ถูกต้อง

Code (PHP)
function sum1_2(obj) { // obj คือ input element ที่ถูกกระท
    let c1, c2, s1, c3, c4,p; // ประกาศตัวแปร เพื่อใช้ในการอ้างอิง
    console.log('obj?', obj.parentElement.nextElementSibling.childNodes[0]);
    if (obj.classList.contains('c1')) { // ตรวจสอบ ว่าเป็น คลาส อะไร ที่ถูกกระทำ 

       c1 = obj; // กรณีเป็นคลาส
        c2 = obj.parentElement.nextElementSibling.childNodes[0];
        c3 = c2.parentElement.nextElementSibling.childNodes[0];
        c2 = obj.parentElement.nextElementSibling.childNodes[0];

    } else {
        c1 = obj.parentElement.previousElementSibling.childNodes[0];
        c2 = obj;
    }
    c2.parentElement.nextElementSibling.childNodes[0].value = (c1.value - 0) + (c2.value - 0);
}


ส่วนจขกท รอสักครู่นะครับ เดี๋ยวเขียนคำอธิบายโค๊ดให้ กินข้าวแป๊ป 5555
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2022-02-02 12:27:47 By : Chaidhanan
 


 

No. 6



โพสกระทู้ ( 9,586 )
บทความ ( 2 )



สถานะออฟไลน์


Code (PHP)
<!doctype html>
<html>
<body>
<table>
<?php
$ar = [1,2,3,4,5];
foreach($ar as $i){ ?>
<tr>
<td><input type="text" name="inp1[<?=$i?>]" OnChange="sum1_2(this);" ></td>
<td><input type="text" name="inp2[<?=$i?>]" OnChange="sum1_2(this);" ></td>
<td><input type="text" name="sum1[<?=$i?>]" ></td>
<td><input type="text" name="inp3[<?=$i?>]" OnChange="sum1_2(this);" ></td>
<td><input type="text" name="div1[<?=$i?>]" OnChange="sum1_2(this);" ></td>
<td><input type="text" name="inp4[<?=$i?>]" OnChange="sum1_2(this);" ></td>
<td><input type="text" name="total[<?=$i?>]" ></td>
</tr>
<?php } ?>
</table>
<script>
function sum1_2(obj) { 
	let tr=obj.parentElement.parentElement  // กำหนด  parent ที่เป็น TR
	, c1 = tr.cells[0].childNodes[0] // input ตัวที่ 1
	, c2 = tr.cells[1].childNodes[0] // input ตัวที่ 2
	, r1 = tr.cells[2].childNodes[0] // result ตัวที่ 1
	, c3 = tr.cells[3].childNodes[0] // input ตัวที่ 3
	, r2 = tr.cells[4].childNodes[0] // result ตัวที่ 2
	, c4 = tr.cells[5].childNodes[0] // input ตัวที่ 4		
	, tt = tr.cells[6].childNodes[0] // total
   if( c1.value.trim().length<1){ c1.focus(); return; }
   if( c2.value.trim().length<1){ c2.focus(); return; }
	let s=(c1.value-0)+(c2.value-0); // sum c1 + c2
	r1.value=s;
   if( c3.value.trim().length<1){ c3.focus(); return; }
	let d = s / (c3.value-0); // r1 / c3
	r2.value=d
   if( c4.value.trim().length<1){ c4.focus(); return; }		
	tt.value=d * (c4.value-0); // r2 * c4 = total
 } 
</script>
</body>
</html>

ลองศึกษาดูครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2022-02-02 13:02:06 By : Chaidhanan
 


 

No. 7



โพสกระทู้ ( 4,756 )
บทความ ( 8 )



สถานะออฟไลน์


ยังดีที่ผมแปะโค้ดทดสอบบน js fiddle เลยยังอยู่บนนั้นด้วย
https://jsfiddle.net/9wg513mz/
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2022-02-02 14:20:05 By : mr.v
 


 

No. 8



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



สถานะออฟไลน์


ตอบความคิดเห็นที่ : 6 เขียนโดย : Chaidhanan เมื่อวันที่ 2022-02-02 13:02:06
รายละเอียดของการตอบ ::
ขอบคุณค่ะจะลองปรับใช้ดูค่ะ

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2022-02-05 08:50:39 By : mewhappy
 


 

No. 9



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



สถานะออฟไลน์


ตอบความคิดเห็นที่ : 7 เขียนโดย : mr.v เมื่อวันที่ 2022-02-02 14:20:05
รายละเอียดของการตอบ ::
ขอบคุณค่ะจะลองปรับใช้ดูค่ะ

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2022-02-05 08:50:58 By : mewhappy
 

   

ค้นหาข้อมูล


   
 

แสดงความคิดเห็น
Re : รบกวนหน่อยค่ะ inputค่าแบบArray ต้องการเอาค่า input มาบวกกันและแสดงค่าทันที ตามรูป ต้องเขียนสคริปยังไงคะ ตามcodeด้านล่างมันจะบวกแค่ช่องแรกค่ะ
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ 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: นำเข้าสินค้าจากจีน, Taobao, เฟอร์นิเจอร์, ของพรีเมี่ยม, ร่ม, ปากกา, power bank, แฟลชไดร์ฟ, กระบอกน้ำ

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