Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,038

HOME > PHP > PHP Forum > jQuery dynamic table สอบถามหาผมรวมทั้งหมดให้แสดงออกด้านล่างตาราง

jQuery dynamic table สอบถามหาผมรวมทั้งหมดให้แสดงออกด้านล่างตาราง

เริ่มหัวข้อใหม่

kko

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

ผมอยากให้ราคารวมของแต่ละช่องมารวมกันที่ช่องยอดรวมครับ ลองทำแล้วได้ NaN แทน
dynamic table

ขอขอบคุณทุกความเห็นครับ
Code (PHP)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <table width="100%" border="1" id="myTable" class="table table-striped jambo_table bulk_action">
    <!-- head table -->
    <thead>
      <tr>
        <td>
          <div align="center">ค้นหาสินค้า </div>
        </td>
        <td>
          <div align="center">รหัสสินค้า </div>
        </td>
        <td>
          <div align="center">จำนวน </div>
        </td>
        <td>
          <div align="center">ราคา </div>
        </td>
        <td>
          <div align="center">ส่วนลด </div>
        </td>
        <td>
          <div align="center">ส </div>
        </td>
        <td>
          <div align="center">รวม </div>
        </td>
      </tr>
    </thead>
    <!-- body dynamic rows -->
    <tbody></tbody>
  </table>
  <p><h5>ยอดรวม : <span id='result'></span></h5></p>
  <br>
  <input class="btn btn-primary btn-sm" type="button" id="createRows" value="เพิ่มแถว">
  <input class="btn btn-danger btn-sm" type="button" id="deleteRows" value="ลบแถว">
  <input class="btn btn-warning btn-sm" type="button" id="clearRows" value="เคลียร์ข้อมูล">
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {

      var rows = 1;
      var listno = 0;
      $("#createRows").click(function() {
        listno++;
        var tr = "<tr>";
        tr = tr + "<td align='center'><input type='hidden' name='ListNo[]' value='" + listno + "'><input type='text' class='GoodName form-control' name='GoodName[]' id='GoodName_" + rows + "' size='100%'></td>";
        tr = tr + "<td align='center'><input type='hidden' name='GoodID[]' id='GoodID_" + rows + "'><input type='text' class='form-control' name='GoodCode[]' id='GoodCode_" + rows + "'><input type='hidden' name='GoodName2[]' id='GoodName2_" + rows + "'><input type='hidden' name='MainGoodUnitID[]' id='MainGoodUnitID_" + rows + "'><input type='hidden' name='GoodTypeID[]' id='GoodTypeID_" + rows + "'></td>";
        tr = tr + "<td align='center'><input type='text' class='form-control bc' name='GoodQty2[]' id=''></td>";
        tr = tr + "<td align='center'><input type='number' class='form-control bc' name='GoodPrice2[]' id=''></td>";
        tr = tr + "<td align='center'><input type='number' class='form-control' name='GoodDiscFormula[]' id='ส่วนลด'></td>";
        tr = tr + "<td align='center'><input type='text' class='form-control' name='Sumwelfareamnt[]' id='ส'></td>";
        tr = tr + "<td align='center'><input type='number' class='form-control' name='Sumwelfareamnt[]' id='ราคารวม'></td>";
        tr = tr + "</tr>";
        $('#myTable > tbody:last').append(tr);

        $('#hdnCount').val(rows);
        rows = rows + 1;
      });

      $("#deleteRows").click(function() {
        listno = listno - 1;
        if ($("#myTable tr").length != 1) {
          $("#myTable tr:last").remove();
        }
      });

      $("#clearRows").click(function() {
        rows = 1;
        listno = 0;
        $('#hdnCount').val(rows);
        $('#myTable > tbody:last').empty();
      });
      
      // event delegation
      $('#myTable').on("keyup", '.bc', function(){
        tr = $(this).parent().parent();
        qty = parseInt(tr.find("td:nth-of-type(3) input").val());
        price = parseInt(tr.find("td:nth-of-type(4) input").val());
        tr.find("td:last input").val(qty*price);
        
        var sum = 0;
        $('tr:last td').each(function() {
          sum += parseInt($(this).text());
        });

        $('#result').text(sum);
       
      });
    });
  </script>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
  
  // 009 @ Christmas 2022
  </script>
</body>
</html>

Tag : PHP, CSS, HTML5, JavaScript, jQuery

ประวัติการแก้ไข
2022-12-27 10:37:22

Date : 2022-12-27 10:36:19

By : kko

View : 647

Reply : 3

No. 1

Стремись не к тому, чтобы добиться успеха, а к тому, чтобы твоя жизнь имела смысл. https://helloworl

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

ถ้าอยากให้มันคำนวณตอนพิมพ์เลย ก็ใส่ใน event เดิม
แล้วอ้างอิง DOM ด้วย jQuery ให้ถูกต้อง
(ผมทำตัวอย่างให้ดูตอนรวมในแถวแล้ว
...ที่เหลือทำความเข้าใจและศึกษาเพิ่มเติมดู)

โดยดึงค่าแต่ละแถวจากเมธอด val() มาแปลงเป็นตัวเลข
ด้วย parseInt() หรือ parseXXX() ตามประเภทข้อมูลก่อน
ค่อยรวมกัน

Date : 2022-12-29 14:23:11

By : 009

No. 2

mr.v

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

คุณไปใช้โค้ดนี้
Code (JavaScript)

var sum = 0;
$('tr:last td').each(function() {
  sum += parseInt($(this).text());
});

คุณเข้าใจป่าวว่ามันคืออะไร?

$('tr:last td') คือการเลือก <td> เฉพาะที่อยู่ใน <tr> รายการสุดท้าย (:last) มาวน .each

แล้วในแต่ละลูปรอบ คุณจับเอาเฉพาะตัวอักษรใน td ด้วยคำสั่ง .text() ($(this) ข้างใน .each คือแต่ละ <td>.
ดังนั้นมันก็เลยวนทุกๆ <td> ของ <tr> รายการสุดท้ายแล้วเอาตัวอักษรในนั้นมาคำณวน ซึ่งพอมันไม่มีมันก็เป็น NaN อะดิครับ.

NaN คืออะไรรู้มั้ย?
มันคือ Not a Number ไม่ใช่ตัวเลขไง. พอค่าแรกมันไม่ใช่แล้วคำณวนต่อไปก็ติด NaN อยู่ดี แถม .text() มันไปจับเอาค่าใน <input value="..."> ไม่ได้ด้วย.

ความจริงไม่อยากให้ใช้ :last ด้วยเพราะมันไม่มีอยู่ในมาตรฐานปัจจุบัน แนะนำให้ไปใช้ :last-child จะดีกว่า เพราะสามารถใช้กับ Native JavaScript selector , CSS ได้ด้วย.
https://api.jquery.com/last-selector/

Quote:
As of jQuery 3.4, the :last pseudo-class is deprecated.

ให้เปลี่ยนเป็น
Code (JavaScript)

var sum = 0;
    $('tr td:last-child').each((index, item) => {
      const value = $(item).find('input').val();
      if (typeof(value) !== 'undefined' && value !== '') {
        sum += parseInt(value);
      }
    });

อย่าลอกวางอย่างเดียว อ่านที่อธิบายข้างบนแล้วทำความเข้าใจโค้ดด้วยนะ

ประวัติการแก้ไข
2022-12-30 13:05:48

Date : 2022-12-30 13:03:46

By : mr.v

No. 3

Стремись не к тому, чтобы добиться успеха, а к тому, чтобы твоя жизнь имела смысл. https://helloworl

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

ตอบความคิดเห็นที่ : 2 เขียนโดย : mr.v เมื่อวันที่ 2022-12-30 13:03:46

รายละเอียดของการตอบ ::

... ขอบคุณมากๆครับ จะศึกษาให้มากกว่านี้ครับ.......

Date : 2022-12-31 12:14:01

By : kko

ค้นหาข้อมูล

แสดงความคิดเห็น

Re : jQuery dynamic table สอบถามหาผมรวมทั้งหมดให้แสดงออกด้านล่างตาราง

รายละเอียด

เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง

โดย

อีเมล์

บวกค่าให้ถูก

<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)

Registered : 109,038