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

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

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

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

Maxtri 26-09-2016 09:55:11

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

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

ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
User

Pass

Code
เปลี่ยน

จำข้อมูลการล็อกอิน
เข้าระบบอัตโนมัติ

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

ล็อกอินด้วย Line

ล็อกอินด้วย Google

ล็อกอินด้วย Twitter

ล็อกอินด้วย Tiktok

ความคิดเห็นที่ 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

https://www.ninenik.com/content.php?arti_id=727 via @ninenik

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

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

https://www.ninenik.com/content.php?arti_id=478 via @ninenik

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

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

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

<!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

https://www.ninenik.com/content.php?arti_id=500 via @ninenik

ninenik 28-09-2016

ความคิดเห็นที่ 7

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

$("#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 แล้วนำไปใช้งานได้ ถ้าเข้าใจวิธีการ โดยไม่ต้องสนใจว่าชื่อนั้นจะต่างกันหรือไม่
แต่ถ้าต้องการกำหนดชื่อเป็นแบบต่างกัน สามารถปรับได้อย่างง่าย ดังนี้

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

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

<!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

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน