Question

我用html创建了一个具有价格和数量的表，所以我创建了jquery。这是我的代码顺便说一句，我的问题是如何在jquery和html中插入数量总数x价格=总数的代码。这是我的代码的结果。

$(document).ready(function () {
    $(".hehe").click(function () {
        $(".xx").append("<tr>" +
                                "<td>" + $(".pName1").text() + "</td>" +
                                "<td>" + $(".pPrice1").text() + "</td>" +
                                "<td>" + $(".quan1").val() + "</td>" + "</tr>")

    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

 <div>
        <img id="lablabz" src="https://picsum.photos/200/200?random" alt="header" style="width:100%">
    </div>
    <div>
        <table class="stableO">
            <tr>
                <td colspan="3">
                    <p class="pName1"> ITEM NAME </p>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    ITEM PICTURE
                </td>
            </tr>
            <tr>
                <td> <p class="pPrice1"> 599.00PHP </td>
                <td><input class="quan1" type="textbox"> </input> </td>
            </tr>
            <tr>
                <td> <button class="hehe"> Order</button> </td>
            </tr>
        </table>
    </div>

    <table class="xx">
        <tr>
            <td colspan="10">
                <P> CART </P>
            </td>
        </tr>
        <tr>
            <td> Name of Product</td>
            <td>  Price </td>
            <td> Quantity </td>
            <td> Total </td>
        </tr>
    </table>

先谢谢！希望你能帮我这个忙。

Answer 1

尝试：

var pname = $(".pName1").text();
var pprice = $(".pPrice1").text();
var pquan = $('input > .quan1').val();

$("table > .xx").append('<tr><td>' + pname + '</td><td>' + pprice + '</td><td>' + pquan + '</td></tr>');

编辑：误读了问题。我的代码中唯一需要添加的是计算结果价格的新变量。但是这种方法更容易，因为您可以声明一个新变量并在那里进行数学运算。

分析

var pname = $(".pName1").text();
var pprice = $(".pPrice1").text();
var pquan = $('input > .quan1').val();

$(document).ready(function(){
 $(".hehe").click(function(){
  $(".xx").append( "<tr>" + "<td>"+$(".pName1").text() +"</td>" + "<td>"+$(".pPrice1").text() + "</td>" + "<td>"+$(".quan1").val() + "</td>"+"</tr>" + '<td>' + pname + '</td><td>' + pprice + '</td><td>' + pquan + '</td></tr>');
 });
});

如前所述。此代码不会显示任何总数。它应该仅在新的<tr>中为您提供相同的值。也最佳做法是在函数中声明变量。以下是清理工作。

$(document).ready(function(){
 $(".hehe").click(function(){

 var pname = $(".pName1").text();
 var pprice = $(".pPrice1").text();
 var pquan = $('input > .quan1').val();
 var ptotal = pprice * pquan;

 $("table > .xx").append('<tr><td>' + pname + '</td><td>' + pprice + '</td><td>' + pquan +  '</td><td>' + ptotal + '</td></tr>');
 });
});

Answer 2

Vehicle Type

Vehicle Model

使用parseFloat函数解析输入文本中的浮点值。

如何使用jquery追加表中的价格和数量

2 个答案: