เนื้อหานี้เป็นแนวทางการใช้งาน data- attribute ใน html5 ในการเก็บข้อมูล
ตัวเลข เพื่อประยุกต์ร่วมกับการบวกรายการข้อมูลในแถวของตาราง และรวมถึง
การรวมข้อมูลแต่ละแถวของตารางสรูปเป็นยอดรวม ตามคอลัมน์ที่ต้องการ
ในตัวอย่างโค้ดจะมีรูปแบบการใช้งานหลายๆ ส่วนที่มาจากพื้นฐานของแต่ละสิ่ง
นำมาประยุกต์รวมๆ กัน ตัวอย่างเช่น การใช้งานการกำหนดให้กรอกข้อมูลได้เฉพาะตัวเลข
จด และคอมม่า หรือการจัดรูปแบบของข้อมูลตัวเลข ให้มีคอมม่าและจุด
การรวมข้อมูลโดยการใช้งาน parseFloat()
การใช้งาน jquery select class และอื่นๆ ที่สามารถเรียนรู้และนำไปต่อยอดเพิ่มเติม หรือทำ
ความเข้าใจ
คำอธิบายจะแสดงในโค้ด ความเข้าใจโดยละเอียด ไม่สามารถอธิบายได้
ต้องลองไล่ดูโค้ดและศึกษาทำความเข้าใจ
ตัวอย่างโค้ดแรก เป็นรูปแบบการกรอกข้อมูลในแถวตาราง ที่มีคอลัมน์เดียว
โดยสมมติว่าเรามีข้อมูลตัวเลขในแต่ละแถว และต้องการจะรวมผลค่าสุทธิที่
แถวสุดท้าย โดยช่อง textbox ที่กรอกข้อมูลนั้น เราจะให้สามารถอัพเดทผลรวมทันที
ที่มีการแก้ไขจำนวนข้อมูล โดยสามารถกรอกตัวเลขในรูปแบบ ตัวเลขอย่างเดียว
หรือมีคอมม่าด้วยก็ได้ หลังจากกรอกข้อมูล เมื่อมีการอัพเดทค่า รายการผลรวมก็จะแสดง
ตัวอย่างโค้ด data-attr-01.php
<!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 class="table table-bordered">
<tr>
<td class="text-center">
<input type="text" name="" id="" class="text-center css_input css_input1" data-number="1050.25" style="width:100px;" value="1,050.25">
</td>
</tr>
<tr>
<td class="text-center">
<input type="text" name="" id="" class="text-center css_input css_input1" data-number="1075.25" style="width:100px;" value="1,075.25">
</td>
</tr>
<tr>
<td class="text-center">
<input type="text" name="" id="" class="text-center css_input css_input1" data-number="1100.25" style="width:100px;" value="1,100.25">
</td>
</tr>
<tr>
<td class="text-center bg-success">
<input type="text" name="" id="total_sum_input1" class="text-center css_input_total" style="width:100px;" value="0.00" readonly>
</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_input1").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_input1").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_data=0; // ทุกครั้งที่มีการเปลี่ยนแปลงค่า textbox ให้ค่ารวมเป็น 0
$(".css_input1").each(function(i,k){ // วนลูป textbox
// นำค่าใน data-number ซื่องไม่มีคอมม่า มาไว้ในตัวแปร สำหรับ บวกเพิ่ม
var data_item=$(".css_input1").eq(i).data("number");
// บวกค่า data_item เข้าไปในผลรวม total_sum_data
total_sum_data=parseFloat(total_sum_data)+parseFloat(data_item);
});
total_sum_data=total_sum_data.toFixed(2); // จัดรูปแบบแปลงทศนิยมเป็น 2 ตำแหน่ง
// จัดรูปแบบกลับมีคอมม่าแล้วแสดงใน textbox ที่เป็นผลรวม
$("#total_sum_input1").val(formatMoney(total_sum_data));
});
$(".css_input1").trigger("change");// กำหนดเมื่อโหลด ทำงานหาผลรวมทันที
});
</script>
</body>
</html>
ตัวอย่าง
ตัวอย่างโค้ดที่สอง เป็นรูปแบบที่ซับซ้อนขึ้น มีการรวมข้อมูลในแต่ละแถวนั้นๆ ก่อน
แล้วก็มีการรวมผลข้อมูลในคอลัมน์ที่ต้องการอีกครั้ง
ตัวอย่างโค้ด data-attr-02.php
<!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 class="table table-bordered">
<tr>
<td class="text-center">
<input type="text" name="" id="" class="text-center css_input css_input1" data-number="4516.09" style="width:100px;" value="4,516.09">
</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>
<td class="text-center">
<input type="text" name="" id="" class="text-center css_input css_input1" data-number="4517.43" style="width:100px;" value="4,517.43">
</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>
<td class="text-center">
<input type="text" name="" id="" class="text-center css_input css_input1" data-number="4518.77" style="width:100px;" value="4,518.77">
</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>
</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();
});
$(".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 ตำแหน่ง
console.log(formatMoney(thisVal));
$(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);
// console.log(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);
// console.log(data_C);
$(".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");// กำหนดเมื่อโหลด ทำงานหาผลรวมทันที
});
</script>
</body>
</html>
