Question

我正在尝试替换我的dom中的元素，以便在我的表行更新时更改，但没有太大的成功。我试过了：

$(this).closest("tr").find(".nameDom").text("new value");

但它对我没用。我也试过这个代码的几个变种而没有结果。

我将很感激有关该问题的任何提示。

以下是我的html结构的截图：

这是整个jQuery函数：

$(document).ready(function() {
    $("#saveBtn").on("click",function() {

        var productId = $("#productIdModal").val();
        var productName = $("#productNameModal").val();
        var productBrand = $("#productBrandModal").val();
        var productPrice = $("#productPriceModal").val();

        var jUpdatedProduct = {};
        jUpdatedProduct.id = productId;
        jUpdatedProduct.name = productName;
        jUpdatedProduct.brand = productBrand;
        jUpdatedProduct.price = productPrice;

        console.log(JSON.stringify(jUpdatedProduct));
        // console.log( jQuery.isEmptyObject(jUpdatedProduct));

        $(this).closest("tr").find(".nameDom").text("new val");
        $(this).closest("tr").find(".brandDom").text("new val");
        $(this).closest("tr").find(".priceDom").text("new val");

        $.ajax
        ({
            type: "GET",
            dataType : 'json',
            async: false,
            url: 'edit-product.php',
            data: { data: JSON.stringify(jUpdatedProduct) },
            success: function () {console.log("Thanks!"); },
            failure: function() {console.log("Error!");}
        });
    });
});

以下是saveBtn所属的模态代码：

<div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
      <div class="form-group">
          <input type="productId" class="form-control" id="productIdModal" readonly>
      </div>
        <div class="form-group">
          <input type="productNameModal" class="form-control" id="productNameModal" placeholder="Product Name">
      </div>
       <div class="form-group">
          <input type="productBrandModal" class="form-control" id="productBrandModal" placeholder="Brand">
      </div>
      <div class="form-group">
        <input type="number" class="form-control" id="productPriceModal" placeholder="Price">
      </div>
      </div>
      <div class="modal-footer">
      <button type="button" id="saveBtn" class="btn btn-success" data-dismiss="modal">Save</button>
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>
    </div>

Answer 1

您正在使用this链接到保存按钮的事件click而不是表格。这就是为什么你无法选择正确的元素并因此更新它的价值。

请尝试下面的代码（假设您当前页面中只有1个html表，如果不是，则需要在下面的代码选择器中添加该表的ID）：

//Debug what element is getting selected in jquery first by using console commands 
console.info($(this) );
console.info('table');

$('table').closest("tr").find(".nameDom").text("new val");
$('table').closest("tr").find(".brandDom").text("new val");
$('table').closest("tr").find(".priceDom").text("new val");

您应该使用上面的代码替换这些现有的行：

$(this).closest("tr").find(".nameDom").text("new val");
$(this).closest("tr").find(".brandDom").text("new val");
$(this).closest("tr").find(".priceDom").text("new val");

用jQuery替换DOM中的元素

1 个答案: