时间戳

首页 > 解决方案 > Java Script 无法从动态创建的表中检索数据

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

问题描述

这里我有一些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 应用程序，仅供参考：

第一个：如何将事件添加到右侧的第二个表。当我尝试通过左侧的第一个表添加事件的相同过程时，单击它什么也不做。

第二：我应该将 json 存储在烧瓶应用程序中它自己的文件中（我该怎么做以及如何访问它？）

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

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

标签： javascriptpythonjsonflask

解决方案

第一个：如何将事件添加到右侧的第二个表。当我尝试通过左侧的第一个表添加事件的相同过程时，单击它什么也不做。

我们需要更多信息。您可能太早地绑定了您的侦听器，以至于这些行还不存在。当您动态创建行时，您应该执行以下操作：

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

第二：我应该在烧瓶应用程序中将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）来构建您的客户端应用程序。

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

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

推荐阅读