Java脚本无法从动态创建的表中检索数据

Question

这里，我有一些Java脚本，当该行上有click事件时，将在另一表中的行中填充被单击的行数据。现在一切正常。 Java脚本将行数据信息添加到json字典，该字典从json数据插入到该字典中。

现在我想对图像右侧的动态创建的表执行的操作，我想向按钮或至少向行添加事件侦听器，以便可以从json字典中删除项目作为回报，仅显示json词典中的项目。

考虑到我是noobie，我确实有几个问题，但是首先是我的代码。

pricecart.js

var tablerows = document.getElementById('tabletest').rows.length;
var table = document.getElementById('tabletest');
var cart = document.getElementById('cart');
var jsonTest = '[]';
var jsonObj = JSON.parse(jsonTest);

for(x = 0; x < tablerows; x++){
  table.rows[x].addEventListener('click', addCartItem);
}

function addCartItem(ev){
  index = this.rowIndex;
  equipmentCell = table.rows[index].cells[0];
  priceCell = table.rows[index].cells[1];
  equipmentName = equipmentCell.innerHTML;
  equipmentPrice = priceCell.innerHTML;
  var row = cart.insertRow(0);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);

  jsonObj[jsonObj.length] = {[equipmentName]:equipmentPrice};

  for(zz=0; zz < jsonObj.length; zz++){
    for(key in jsonObj[zz]){
      cell1.innerHTML = key;
    }
    cell2.innerHTML = "<strong>"+jsonObj[zz][equipmentName]+"</strong>";
    cell3.innerHTML = "<button class='btn btn-danger'>Delete</button>";
  }
}

pricing.html

{% extends 'base.html' %}
{% block content %}
  <h1>Pricing</h1>
  <div class="row">
    <div class="container col-sm-6">
      <div class="container border">
        <table id='tabletest'>
          <thead>
            <th><h5>Equipment</h5></th>
            <th "><h5>Price</h5></th>
          </thead>
            {% for quip in pricing %}
              <tr style="height:25px;" class="border">
                <td id='pricewidth'>{{quip}}</td>
                <td id='pricewidth' style='text-align:center;'>${{pricing[quip]}}</td>
                <td ><button type="button" name="button" class="btn btn-primary">Add</button></td>
              </tr>
            {% endfor %}
        </table>
      </div>
    </div>
    <div class="container col-sm-6">
      <table id='cart'>
      </table>
      <h1>Subtotal: </h1>
      <button type="submit" name="button" class='btn btn-warning'>Order</button>
    </div>
  </div>
{% endblock content %}

现在这是Flask应用程序fyi：

1st：如何将事件添加到右侧的2nd表中。当我尝试通过左侧第一个表格添加事件的相同过程时，单击该按钮不会执行任何操作。

2nd：我应该在flask应用程序中将json存储在它自己的文件中吗（我该怎么做以及如何访问它？）

3rd：如果一个用户正在写入json dict，则其他用户在向购物车中添加商品时也会看到相同的信息。对该部分的工作方式非常困惑。

请随时将我指向任何链接。我真的是在尝试最佳的Web开发实践，并在实践和工作项目时将其根深蒂固。因此，请告诉我是否有其他方法可以或应该编写代码。谢谢大家。

Answer 1

  

第一个：如何将事件添加到右侧的第二个表中。当我尝试   通过左侧第一个表添加事件的相同过程   单击后不执行任何操作。

我们需要更多信息。您可能太早绑定了侦听器，以致行尚不存在。动态创建行时，应执行以下操作：

var row = cart.insertRow(0);
row.addEventListener('click', function(){
   ...
});

  

2nd：我应该在flask应用程序中将json存储在它自己的文件中吗（如何   我该怎么做，我将如何进行访问？）

您无法使用javascript直接写入json文件。您将必须使用Flask创建一个API，才能修改您存储的数据。如果您从未创建过REST API，请查看本教程：https://blog.miguelgrinberg.com/post/designing-a-restful-api-with-python-and-flask。

无论如何，要将数据发送到此API，您将必须从javascript（XHR）发送http请求。如果您打算创建一个巨大的网站，我强烈建议您使用js框架（例如Vuejs或AngularJS）来构建您的客户端应用。

  

3rd：如果一个用户正在写入json dict，其他用户是否会看到   他们将商品添加到购物车时的相同信息。非常   对该部分的工作方式感到困惑。

对于这种用例，我觉得将数据写入json文件不是一个好主意。您可能应该使用通过SQLORchemy之类的Python ORM使用的数据库。它将为您管理并发访问数据。与Flask一起使用时，我最喜欢的方法是使用连接器marshmallow-sqlalchemy。或者，您可以将购物车仅存储在浏览器的Cookie中（在浏览器中）