Question

我有一个使用json数据制作表格的程序。该技术使用模板字体，因此我可以自己添加行，但是我想要的。我的问题是我需要从输入中获取数据，该输入具有一个模板文字作为ID，但是getElementById不允许我这样做。

我已经尝试过转义括号，但这是行不通的。我已经研究过使用简单的索引，但是我不知道如何在函数中进行设置。

这是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;
    txt = JSON.parse(articles);

    processArticles(txt);

    processForm(txt);

  }
};
xmlhttp.open("GET","../articles.json",true);
xmlhttp.send();

function processArticles(txt) {

  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, index) {
      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" name="quantity${txt.ID}" id="quantity${txt.ID}" min="1" max="5"></td>
          </tr>
      `;

  }


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

问题出在最后一个函数中我数量的.getElementById。

function processForm(txt) {
  var form = document.getElementById('formtable');
  var quantity = document.getElementById(`"quantity$\\{txt.ID\\}"`);

  form.onsubmit = function(e) {
   e.preventDefault();
   console.log("HI");
   console.log(quantity.value);
 };

}

我希望能够收集选择的每个对象的数量以及该对象的价格，以便我可以在表格末尾得出总价。

Answer 1

我认为您不小心引用了类似@DontVoteMeDown的错误报价。

让我们假设

txt.ID = 2

然后输入模板字符串

`<input ... id="quantity${txt.ID}" />`

将导致

<input ... id="quantity2" />

以及选择器的模板字符串

document.getElementById(`quantity${txt.ID}`);

将导致

document.getElementById("quantity2");

所以它应该可以正常工作。

如果要汇总结果表的所有输入值，则必须选择所有输入并遍历所有值。

var total = 0;
document.querySelectorAll('#formtable input').forEach(function(input) {
   total += parseInt(input.value);
})

使用模板文字作为ID从输入获取数据

1 个答案: