使用Ajax获取<td>的值

Question

In my Checkout page, i have table which is display products where customer want to buy and than i want get value of each <td> and save it into database, but i dont know what did i wrong, i also get class to each <td>, but it couldn't get value of <td> and than when i check DB i can see row is inserted but contains null value. Can anyone please help me or point me into the right direction :)

This is my code so far:

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");
                        }                   
                    }

                });
            });
     });

Controller:

[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

Is the placeholder button in the same TR as the row that contains the data being processed? It didn't appear so in the dynamic markup sample you are adding.

$(".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?