Java Script Не может получить данные из динамически созданной таблицы

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

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:

1-й: Как добавить события во 2-ю таблицу справа.Когда я пытаюсь выполнить тот же процесс добавления событий через первую таблицу слева, при нажатии ничего не происходит.

2-й: Должен ли я хранить json в своем собственном файле в приложении фляги (как это сделать и какЯ собираюсь получить доступ к этому?)

3-й: Если один пользователь пишет в json dict, увидят ли другие пользователи ту же самую информацию, когда они будут добавлять товары в свою корзину.Очень запутался, как эта часть работает.

Не стесняйтесь указывать мне на любые ссылки.Я действительно пытаюсь понять лучшие практики веб-разработки, и это укоренилось во время практики и работы над моими проектами.Поэтому, пожалуйста, скажите мне, есть ли другие способы, которыми я могу или должен писать свой код.Спасибо вам всем.

Answer 1

1-й: Как добавить события во 2-ю таблицу справа.Когда я пытаюсь выполнить тот же процесс добавления событий через первую таблицу слева, при нажатии ничего не происходит.

Нам нужна дополнительная информация.Возможно, вы слишком рано связываете слушателя, так что строки еще не существуют.Когда вы динамически создаете свои строки, вы должны сделать что-то вроде:

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

2-й: Должен ли я хранить json в своем собственном файле в приложении фляги (Как это сделать и как мне поступитьдоступ к этому?)

Вы не можете напрямую записывать в файл json, используя javascript.Вам нужно будет создать API с помощью Flask, чтобы иметь возможность изменять сохраненные данные.Посмотрите это руководство, если вы никогда не создавали REST API: https://blog.miguelgrinberg.com/post/designing-a-restful-api-with-python-and-flask.

В любом случае, для отправки данных в этот API вам придется отправлять http-запросы из javascript ( XHR ).Если вы планируете создать огромный веб-сайт, я настоятельно рекомендую использовать инфраструктуру js (например, Vuejs или AngularJS ) для структурирования вашего клиентского приложения.

3-е: если один пользователь пишет в json dict, другие пользователи увидят эту же информацию при добавлении товаров в свою корзину.Я не совсем понимаю, как работает эта часть.

Мне кажется, что запись данных в файл json не очень хорошая идея для этого варианта использования.Вам, вероятно, следует использовать базу данных с использованием Python ORM, например SQLAlchemy.Он будет управлять для вас одновременным доступом к данным.Мой любимый способ использовать его вместе с Flask - использовать соединитель marshmallow-sqlalchemy .Или вы можете просто сохранить свою корзину в куки браузера (в браузере)