时间戳

首页 > 解决方案 > 使用 JavaScript 在表格中创建新行，innerHTML 设置输入变量，但用户输入的值在提交时不会发布

javascript - 使用 JavaScript 在表格中创建新行，innerHTML 设置输入变量，但用户输入的值在提交时不会发布

问题描述

我创建了一个如下所示的表：

<form role="form" method="post" action="" enctype="multipart/form-data">
 <table class="table table-striped" id='billables'>
     <input type='hidden' name='products' id='products' value='0'>
        <thead>
           <tr>
              <th>Description</th>
              <th>Quantity (#)</th>
              <th>Rate ($)</th>
              <th>Amount ($)</th>
           </tr>
        </thead>

           <tbody >
             //The ROW gets inserted properly here, and each row gets 
               assigned a "input variable" properly
           </tbody>
  </table>
 </form>

我正在使用一个 javascript 函数，当单击一个按钮时，它将在带有输入字段的表中添加一个新行。

   function addRow() {
    var products = document.getElementById("products").value;
    products = parseFloat(products)
    products = products + 1;
    document.getElementById("products").value = products;

    var table = document.getElementById("billables");
    var row = table.insertRow(products);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    var cell4 = row.insertCell(3);

    cell1.innerHTML = '<input class="form-control" id="'+products+'desc" type="text" name="'+products+'desc" required placeholder="Item Desc..." >';
    cell2.innerHTML = "<input class='form-control' id='"+products+"quant' type='number' name='"+products+"quant' required placeholder='Quantity...' >";
    cell3.innerHTML = "<input class='form-control' id='"+products+"rate' type='number' name='"+products+"rate' required step='0.01' placeholder='Ex: 23.99' onkeyup='calc()'>";
    cell4.innerHTML = "<input class='form-control' id='"+products+"amm' type='number' name='"+products+"amm' readonly >";
}

“name”和“id”字段根据表中存在的行数动态命名。

IE: 1desc 一排。1desc,2desc 两行等...

该表正确填充，创建新行，为每个单元格添加一个输入字段，并根据谷歌调试器/检查输入字段正确命名。

我的问题是，当提交表单时，使用 innerHTML 函数生成的那些元素的值无法正确发布。尽管表单中的所有其他变量都已正确发布。

有任何想法吗？

为澄清而编辑 - 发布帖子时丢失了 ' 。并且表单标签被放置在更早的代码中，添加它以显示它的外观。

编辑：

图片显示了添加新行之前表格的外观

添加新行后显示表格的样子

谷歌开发工具指示输入变量生成后的样子（全部正确）

根据谷歌开发工具，其他变量正在发布，但不是由 innerHTML 函数生成的变量

标签： javascripthtml

解决方案

首先没有form标签。以下行有错误。

<input type='hidden' name='products id='products' value='0'>

改成——

<input type='hidden' name='products' id='products' value='0'>

由于以上

 var products = document.getElementById("products").value;

这行代码没有设置它的值，你不能发布它。

推荐阅读