php - 即使使用 jquery 添加了新行，我如何在 ajax 的数据表中添加(数字总和)-6ren

php - 即使使用 jquery 添加了新行，我如何在 ajax 的数据表中添加(数字总和)

转载作者：行者123 更新时间：2023-11-30 22:14:07

我正在尝试使用 ajax 对 php 页面进行添加(或在需要时进行减法)。

这段代码应该做的是将所有价格相加，并通过实时编辑表给我正确的总和。

如果用户更改价格的值 $price_total 应该相应地更改。

即使添加了新行，它仍应提供包括新行在内的新总和(显示在 $price_total 和 $final_price_total 中)。

我一直在想办法做到这一点，但我想不通。

$price_total 和 $final_price_total 没有保存到数据库中

这是我目前的代码:

索引.php

<html>
      <head>
           <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
           <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
           <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
      </head>
      <body>
           <div class="container">
                <br />
                <br />
                <br />
                <div class="table-responsive">
                     <div id="live_data"></div>            
                </div>
           </div>
      </body>
 </html>
 <script>

$(document).ready(function(){
    function fetch_data(){
        $.ajax({
            url:"select.php",
            method:"POST",
            success:function(data){
                $('#live_data').html(data);
            }
        });
    }
    function formatDecimal(val, n) {
        n = n || 2;
        var str = "" + Math.round ( parseFloat(val) * Math.pow(10, n) );
        while (str.length <= n) {
            str = "0" + str;
        }
        var pt = str.length - n;
        return str.slice(0,pt) + "." + str.slice(pt);
    }

    fetch_data();
    function edit_data(id, text, column_name){
        $.ajax({
            url:"edit.php",
            method:"POST",
            data:{
                id:id,
                text:text,
                column_name:column_name
            },
            dataType:"text",
            success:function(data){
                /*alert(data);*/
            }
        });
    }

    $(document).on('click', '#btn_add', function(){
        /* this function would also add the prices to the table*/ 
        var price = $('#price').text();
        var final_price = $('#final_price').text();
        if(price == ''){
            alert("Enter Price");
            return false;
        }
        if(final_price == ''){
            alert("Enter Final Price");
            return false;
        }
        $.ajax({
            url:"insert.php",
            method:"POST",
            data:{price:price, final_price:final_price},
            dataType:"text",
            success:function(data){
                alert(data);
                fetch_data();
            }
        })
    });

    $(document).on('blur', '.price', function(){
        var id = $(this).data("id1");
        var price = $(this).text();
        edit_data(id, price, "price");
        /*I'm trying so that I can add the new input price with the old total to give the exact value*/
        $total = parseFloat( price ) + parseFloat( $('#price_total').value );
        $('#price_total').value = formatDecimal(total);
    });

    $(document).on('blur', '.final_price', function(){
        var id = $(this).data("id2");
        var final_price = $(this).text();
        edit_data(id, final_price, "final_price");
    });


});

选择.php

<?php

$connect = mysqli_connect("localhost", "root", "", "test_db");  
$output = '';  
$sql = "SELECT * FROM tbl_sample ORDER BY id DESC";  
$result = mysqli_query($connect, $sql);

$output .= '
    <div class="table-responsive">
    <table class="table table-bordered">
    <tr>
    <th width="10%">Id</th>
    <th width="40%">Price</th>
    <th width="40%">Final Price</th>
    <th width="10%">Delete</th>
    </tr>';
if(mysqli_num_rows($result) > 0){
    $final_price_total = 0;
    $price_total = 0;
    while($row = mysqli_fetch_array($result)){
        $output .= '
            <tr>
            <td>'.$row["id"].'</td>
            <td class="price" data-id1="'.$row["id"].'" contenteditable>'.$row["price"].'</td>
            <td class="final_price" data-id2="'.$row["id"].'" contenteditable>'.$row["final_price"].'</td>
            <td><button type="button" name="delete_btn" data-id3="'.$row["id"].'" class="btn btn-xs btn-danger btn_delete">x</button></td>
            </tr>
            ';
            $final_price_total += $row["final_price"];
            $price_total += $row["price"];
        }
        $output .= '
            <tr>
            <td></td>
            <td class="price_total" id="price_total" name="price_total" value="'.$price_total.'" contenteditable>'.$price_total.'</td>
            <td class="final_price_total" id="final_price_total" name="final_price_total" value="'.$final_price_total.'" contenteditable>'.$final_price_total.'</td>
            <td></td>
            </tr>
            ';
        $output .= '
            <tr>
            <td></td>
            <td id="price" contenteditable></td>
            <td id="final_price" contenteditable></td>
            <td><button type="button" name="btn_add" id="btn_add" class="btn btn-xs btn-success">+</button></td>
            </tr>
            ';
}
else{
    $output .= '<tr>
    <td colspan="4">Data not Found</td>
    </tr>';
}
$output .= '</table>
</div>';
echo $output;
?>

最佳答案

从问题评论中的小讨论中，我设法发现了这个变量拼写错误:

 $total = parseFloat( price ) + parseFloat( $('#price_total').value );
 $('#price_total').value = formatDecimal(total);

在第二行，您使用的是 total 而不是 $total。

如果您检查浏览器的错误控制台，您将看到有关未声明的变量 total 的错误。

编辑:经过进一步讨论，您想知道如何在 JavaScript 中遍历表格并将总数加起来。试试这个:

var newTotal = 0.0;
$('.price').each(function() {
    newTotal += parseFloat($(this).text());
});

如果您对编辑结果执行此操作，则可以在 final_price 字段中使用 newTotal 变量来代替您使用 $total 变量的位置。

关于php - 即使使用 jquery 添加了新行，我如何在 ajax 的数据表中添加(数字总和)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39047306/

文章推荐： c# - 我们如何更改 SQL Server(2008) 数据库的日期格式？

文章推荐： php - 如何在一定数量后停止++$i 自动递增

文章推荐： mysql - 使用 SQL INNER JOIN 批量更新字段

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

php - 即使使用 jquery 添加了新行，我如何在 ajax 的数据表中添加(数字总和)