javascript - Javascript无法从动态创建的表中检索数据

Question

这里我有一些java脚本，其中当行上有单击事件时，不同表中的行将填充单击的行数据。现在效果非常好。 java脚本将行数据信息添加到json字典中，其中行是从json数据插入的。

现在我想在图像右侧的动态创建的表上执行什么操作，我想将事件监听器添加到按钮，或者至少添加到行，以便我可以从 json 字典中删除项目作为返回，仅显示 json 字典中的项目。

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

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

定价.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 应用程序仅供引用:

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

第二:我应该将 json 存储在 Flask 应用程序内它自己的文件中(我该怎么做以及如何访问它？)

第三:如果一个用户正在写入 json 字典，其他用户在将商品添加到购物车时是否会看到相同的信息。对该部分的工作原理非常困惑。

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

Answer 1

1st: How do I add events to 2nd table on the right. When I try the same process of adding events through the first table on the left it does nothing upon clicking.

我们需要更多信息。您可能太早绑定(bind)监听器，以致行尚不存在。当您动态创建行时，您应该执行以下操作:

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

2nd: Should I store json in it's own file within flask application(How do I do this and how would I go about accessing this?)

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

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

3rd: If one user is writing to json dict, will other users see that same information when they are adding items to their cart. Very confused on how that part works.

我觉得将数据写入 json 文件对于这个用例来说不是一个好主意。您可能应该使用使用 Python ORM 的数据库，例如 SQLAlchemy。它将为您管理对数据的并发访问。我最喜欢将它与 Flask 一起使用的方式是使用连接器 marshmallow-sqlalchemy 。或者您可以简单地将购物车存储在浏览器的 cookie 中(在浏览器中)