使用 Ajax 获取 <td> 的值

Question

在我的结帐页面中，我有一个表格，显示客户想要购买的产品，而不是我想要获取每个 <td> 的价值并将其保存到数据库中，但我不知道我做错了什么，我也得到了类到每个<td>，但它无法获得<td> 的值，当我检查数据库时，我可以看到插入的行但包含空值。任何人都可以帮助我或指出我正确的方向:)

这是我目前的代码：

HTML：

<div class="container">
    <h1>Shopping Checkout</h1>
    <table class="table table-hover">
        <thead class="thead-inverse">
            <tr>
                <th>Qty</th>
                <th>Item Name</th>
                <th>Cost</th>
                <th class="text-xs-right">Subtotal</th>
            </tr>
        </thead>
        <tbody id="output"> </tbody>
    </table>
    <input type="submit" class="btn btn-primary btn-block placeorder" value="PlaceOrder">
</div>

JS：

$(document).ready(function () {

        //Display Products in Checkout list
        function myfunction() {
            $.ajax({
                type: "GET",
                url: "http://localhost:xxx/api/Values/ProdukterudID" + params,
                dataType: "json",
                success: function (values) {
                    var total = 0;
                    for (var i = 0; i < values.length; i++) {
                        value = values[i]
                        if (value != null) {
                            var stotal = localStorage.getItem("prod_" + value.ProductID) * value.ProductPrice;
                            total += stotal;

                           //here i defined <td> with class
                            holderHTML += '<tr><td class="Qty">' + localStorage.getItem("prod_" + value.ProductID) + '</td><td class="ProductName"> ' + value.ProductName + '</td><td> ' + formatMoney(value.ProductPrice) + ' </td><td class="Subtotal" class="text-xs-right"> ' + formatMoney(stotal) + '</td></tr>'
                        }

                    }

                    $('#output').html(holderHTML);
                },
            })
        }

        myfunction();

       //Button click save into database
            $(".placeorder").click(function (e) {

                e.preventDefault();

                var tr = $(this).closest("tr");
                var model = {
                    Qty: tr.find(".Qty").text(),
                    Subtotal: tr.find(".Subtotal").text(),
                    ProductName: tr.find(".ProductName").text(),
                }
                $.ajax({
                    type: 'POST',
                    url: "http://localhost:xxx/api/Values/PlaceOrder",
                    contentType: 'application/json; charset=utf-8',
                    dataType: 'json',
                    data: {
                        Qty: model.Qty,
                        Subtotal: model.Subtotal,
                        ProductName: model.ProductName,
                        Email: localStorage.getItem("Email")
                    },
                    success: function (run) {

                        if (run)
                        {
                            console.log("Ok");
                        }

                        else {
                            console.log("error");
                        }                   
                    }

                });
            });
     });

控制器：

[Route("api/Values/PlaceOrder")]
[HttpPost]
public IHttpActionResult PlaceOrder() {

    DateTime CreatedAt = DateTime.Today;
    CustomerOrdersVM model = new CustomerOrdersVM();

    var SaveOrdre = new CustomerOrders
    {
        Qty = model.Qty,
        Email = model.Email,
        ProductName = model.ProductName,
        Subtotal = model.Subtotal,
        CreatedAt = CreatedAt,
    };

    db.CustomerOrders.Add(SaveOrdre);
    db.SaveChanges();

    return Ok(model);
}

Answer 1

占位符按钮是否与包含正在处理的数据的行位于同一 TR 中？它在您添加的动态标记示例中并未如此显示。

$(".placeorder").click(function (e) {
   e.preventDefault();
   var tr = $(this).closest("tr"); // button in same TR as data cell?

    var model = {  Qty: tr.find(".Qty").text(), .. } // same row as button?