Question

请检查下面的代码。在#btnConfirm按钮上单击，我必须抓住每个class="invTr" data-productid="1"，然后在每个tr内部，我必须抓住两个td文本，即-Quantity和{{ 1}}，然后在Price Per Unit中存储整个对象。在jQuery代码注释中，您将获得我想要成为的对象输出的样本。任何人都可以从我当前的var Items = {}进行这样的输出吗？我已经尝试过的代码就像jquery波纹管，但是我被卡在这里，错误提示tr。有什么想法可以这样输出吗？同样，任何人都可以提供很棒的JSON对象输出。预先感谢

当前出现的错误是：

无法读取未定义的属性“ push”

这里是我的js fiddle，可以快速尝试

HTML：

push of undefined

jQuery：

<table class="table table-hover table-sm">
    <thead>
        <tr>
            <th scope="col">Title</th>
            <th scope="col">Quantity</th>
            <th scope="col">Price Per Unit</th>
            <th scope="col">Total Price</th>
            <th scope="col">Action</th>
        </tr>
    </thead>
    <tbody>
    <tr class="invTr" data-productid="1"> <td>lavenda things</td> <td> <input type="number" class="form-control qty" style="width:75px;" pattern="[0-9]" min="1" max="10000" value="1"> </td> <td> 10.00 </td> <td> 20.55 </td> <td>pp</td> 
    </tr>
    <tr class="invTr" data-productid="2"> <td>lavenda things</td> <td> <input type="number" class="form-control qty" style="width:75px;" pattern="[0-9]" min="1" max="10000" value="3"> </td> <td> 20.00 </td> <td> 20.55 </td> <td>pp</td> 
    </tr>
    </tbody>
</table>
<button id="btnConfirm">Confirm</button>

Answer 1

invTrClassesObj.ProductId给出'push' of undefined，因为尚未设置invTrClassesObj.ProductId。

我添加了代码以获取所需的JSON对象输出。

//confirm button on click actions
$('#btnConfirm').on('click', function () {

var x = document.querySelectorAll(".invTr");

//console.log(x);
  var Items = {};
  var invTrClassesObj = [];
  var _invTrClasses = $('.invTr');
  $.each(_invTrClasses, function (i, invTrClasse) {
    invTrClassesObj.push(
    {
      'ProductId':invTrClasse.getAttribute('data-productId'),
      'Price': $(this).find("td").eq(2).html(),
      'Quantiry':$(this).closest('tr').find(".qty").val()
      });
  }); 
  
console.log(invTrClassesObj);

  //console.log(Items); //I want output object like this-> { ProductId:1 { Price:10.00, Quantiry:1 }, ProductId:2 { Price:20.00, Quantiry:3 } }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover table-sm">
    <thead>
        <tr>
            <th scope="col">Title</th>
            <th scope="col">Quantity</th>
            <th scope="col">Price Per Unit</th>
            <th scope="col">Total Price</th>
            <th scope="col">Action</th>
        </tr>
    </thead>
    <tbody>
    <tr class="invTr" data-productid="1"> <td>lavenda things</td> <td> <input type="number" class="form-control qty" style="width:75px;" pattern="[0-9]" min="1" max="10000" value="1"> </td> <td> 10.00 </td> <td> 20.55 </td> <td>pp</td> 
    </tr>
    <tr class="invTr" data-productid="2"> <td>lavenda things</td> <td> <input type="number" class="form-control qty" style="width:75px;" pattern="[0-9]" min="1" max="10000" value="3"> </td> <td> 20.00 </td> <td> 20.55 </td> <td>pp</td> 
    </tr>
    </tbody>
</table>
<button id="btnConfirm">Confirm</button>

抓取每个tr值，并使用td值创建对象

1 个答案: