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

เขียนเมื่อ 8 ปีก่อน โดย Ninenik Narkdee
jquery รวมแถว ผลรวม data

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ jquery รวมแถว ผลรวม data

ดูแล้ว 10,795 ครั้ง


เนื้อหานี้เป็นแนวทางการใช้งาน data- attribute ใน html5 ในการเก็บข้อมูล
ตัวเลข เพื่อประยุกต์ร่วมกับการบวกรายการข้อมูลในแถวของตาราง และรวมถึง
การรวมข้อมูลแต่ละแถวของตารางสรูปเป็นยอดรวม ตามคอลัมน์ที่ต้องการ
 
ในตัวอย่างโค้ดจะมีรูปแบบการใช้งานหลายๆ ส่วนที่มาจากพื้นฐานของแต่ละสิ่ง
นำมาประยุกต์รวมๆ กัน ตัวอย่างเช่น การใช้งานการกำหนดให้กรอกข้อมูลได้เฉพาะตัวเลข
จด และคอมม่า หรือการจัดรูปแบบของข้อมูลตัวเลข ให้มีคอมม่าและจุด 
การรวมข้อมูลโดยการใช้งาน parseFloat() 
การใช้งาน jquery select class และอื่นๆ ที่สามารถเรียนรู้และนำไปต่อยอดเพิ่มเติม หรือทำ
ความเข้าใจ
 
คำอธิบายจะแสดงในโค้ด ความเข้าใจโดยละเอียด ไม่สามารถอธิบายได้
ต้องลองไล่ดูโค้ดและศึกษาทำความเข้าใจ
 
ตัวอย่างโค้ดแรก เป็นรูปแบบการกรอกข้อมูลในแถวตาราง ที่มีคอลัมน์เดียว
โดยสมมติว่าเรามีข้อมูลตัวเลขในแต่ละแถว และต้องการจะรวมผลค่าสุทธิที่
แถวสุดท้าย โดยช่อง textbox ที่กรอกข้อมูลนั้น เราจะให้สามารถอัพเดทผลรวมทันที
ที่มีการแก้ไขจำนวนข้อมูล โดยสามารถกรอกตัวเลขในรูปแบบ ตัวเลขอย่างเดียว
หรือมีคอมม่าด้วยก็ได้ หลังจากกรอกข้อมูล เมื่อมีการอัพเดทค่า รายการผลรวมก็จะแสดง
 

ตัวอย่างโค้ด data-attr-01.php

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!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

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
<!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>
 

ตัวอย่าง

 

 





กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ





Tags:: jquery data รวมแถว ผลรวม







URL สำหรับอ้างอิง












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