การคำนวนคะแนน

พูดคุยแลกเปลี่ยน ปัญหา การเขียน JavaScript เครื่องมือ AJAX Web 2.0 AJAX Framework jQuery และ Node.JS รวมถึง Framework Express ของ Node.JS ทำงานฝั่ง Server

Moderator: mindphp

Suparuch
PHP Newbie
PHP Newbie
โพสต์: 1
ลงทะเบียนเมื่อ: 20/06/2012 9:27 am

การคำนวนคะแนน

โพสต์ที่ยังไม่ได้อ่าน โดย Suparuch »

คือจะเขียนการคำนวนคะแนนของนักเรียนจำนวน 10 ช่อง ครับ
คือคะแนนนี้ จะได้มากจากการกรอกคะแนนบนเว็บคับ
คือผมอยากให้กรอกคะแนนแล้วคำนวนเลย ถึงกรอกไม่ครบ 10 ช่อง ก็จะคำนวนตลอดทุกครั้งที่กรอกครับ
พี่ๆๆ ช่วยแนะนำวิธีการเขียน JavaScript หน่อยนะครับ ขอบคุณครับ :-D
ภาพประจำตัวสมาชิก
sunzandesign
PHP Newbie
PHP Newbie
โพสต์: 6
ลงทะเบียนเมื่อ: 08/05/2012 11:59 pm
ติดต่อ:

Re: การคำนวนคะแนน

โพสต์ที่ยังไม่ได้อ่าน โดย sunzandesign »

โค้ด: เลือกทั้งหมด

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<script src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function() {
	$('input').keyup(function(){
		var row = $(this).attr('class');
		var total = 0;
		$("input."+row).each(function() {
			var i = parseInt($(this).val());
			if(i > 0){
				total += i;
			}
		});
		$("input#total"+row).val(total);
	});
});
</script>
<style>
input { width : 70px; }
</style>
</head>

<body>
<table>
 <tr>
	<th>ช่องที่ 1</th>
	<th>ช่องที่ 2</th>
	<th>ช่องที่ 3</th>
	<th>ช่องที่ 4</th>
	<th>ช่องที่ 5</th>
	<th>ช่องที่ 6</th>
	<th>ช่องที่ 7</th>
	<th>ช่องที่ 8</th>
	<th>ช่องที่ 9</th>
	<th>ช่องที่ 10</th>
	<th>รวม</th>
 </tr>
 <tr>
	<td> <input class="1" type="text"/></td>
	<td> <input class="1" type="text"/></td>
	<td> <input class="1" type="text"/></td>
	<td> <input class="1" type="text"/></td>
	<td> <input class="1" type="text"/></td>
	<td> <input class="1" type="text"/></td>
	<td> <input class="1" type="text"/></td>
	<td> <input class="1" type="text"/></td>
	<td> <input class="1" type="text"/></td>
	<td> <input class="1" type="text"/></td>
	<td> <input id="total1" type="text"/></td>
 </tr>
  <tr>
	<td> <input class="2" type="text"/></td>
	<td> <input class="2" type="text"/></td>
	<td> <input class="2" type="text"/></td>
	<td> <input class="2" type="text"/></td>
	<td> <input class="2" type="text"/></td>
	<td> <input class="2" type="text"/></td>
	<td> <input class="2" type="text"/></td>
	<td> <input class="2" type="text"/></td>
	<td> <input class="2" type="text"/></td>
	<td> <input class="2" type="text"/></td>
	<td> <input id="total2" type="text"/></td>
 </tr>
 </table>
 </body>
</html>
จะต้องใช้กับ jquery ด้วยนะครับ

ส่วนชื่อคลาสของ input เป็นการดึงข้อมูลมาจากฐานข้อมูล
ค่า class="1" และ class="2" ในตัวอย่าง
จะใช้เป็นรหัสไอดีของข้อมูลแต่ละคน แต่ละแถวที่วนลูปออกมานะครับ
-------------------------------------
ตอบกลับโพส

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 2