Question

我正在使用模板文字在JavaScript中创建表格，因此我无权访问表格的每一行。我有一个设置表格的表格，每行的末尾都有一个数字输入。现在，我的程序只将第一个对象的数量发送到控制台，但是我需要根据id来获取所有数量，以便我可以在购物车末尾总计。

我不知道是否可以循环遍历每一行并告诉我ID，价格和数量，但这将是我的本能。我对JavaScript还是很陌生，所以我真的不知道从这里去哪里。

这是我的JavaScript代码：

//load JSON file
var articles = ""
var txt = ""
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function(){
  if(xmlhttp.status == 200 && xmlhttp.readyState == 4){
    articles = xmlhttp.responseText;

    processArticles(articles);

    var form = document.getElementById('formtable');
    var quantity = document.getElementById('quantity');

    form.onsubmit = function(e) {
     e.preventDefault();
     console.log("HI");
     console.log(quantity.value);
   };
  }
};
xmlhttp.open("GET","../articles.json",true);
xmlhttp.send();

function processArticles(articles) {
  txt = JSON.parse(articles);

  var tableStart = `
    <h2>Liste des articles</h2>
    <form id="formtable">
    <table>
      <tr>
        <th>ID</th>
        <th>Article</th>
        <th>Prix</th>
        <th>Prix-Retour</th>
        <th>Quantitée maximale</th>
        <th>Projet</th>
        <th>Quantitée</th>
      </tr>`;

  var tableEnd = `
    </table>
    <input type="submit">
    </form>`;

  function articlesTemplate(txt) {
    return `
        <tr>
          <td>${txt.ID}</td>
          <td>${txt.Article }</td>
          <td>${txt.Prix}</td>
          <td>${txt.PrixRetour}</td>
          <td>${txt.QuantiteeMaximale}</td>
          <td>${txt.Projet}</td>
          <td><input type="number" id="quantity" min="1" max="5"></td>
        </tr>
    `;
  }

  let mctxt=txt.filter(value=>
    value.Projet=="mc");
    document.getElementById("tablemc").innerHTML = `
      ${tableStart}
      ${mctxt.map(articlesTemplate).join("")}
      ${tableEnd}
      `;
    ;
}

在我的HTML中，我只有一个ID为tablemc的div。

我希望能够看到带有ID的每个项目的数量，这样我就可以在表格的末尾计算总金额。现在，它仅发送第一件商品的数量，而没有告诉我它是哪个ID或商品的价格。

从表的每一行中的输入获取数据

0 个答案: