Javascript以表单形式动态添加输入字段-需要脚本帮助

Question

我下载了以下脚本，因为我对javascript一无所知。 我要对此脚本执行的操作是在按钮之前而不是按钮之后添加输入字段。

我已经有一组用标题硬编码的输入字段，所以我只想将新的输入字段添加到它们的下方和按钮之前。

任何帮助表示赞赏。

不确定如何在此处显示代码，因为没有任何代码链接似乎没有任何作用，因此，如果有人可以告诉我，我将发布代码。

    <script type="text/javascript">
  function addRow(parts)
  {
        var table = document.getElementById(parts);
        var i = table.rows.length;

        var newRow = table.insertRow(-1);
        newRow.innerHTML =
                    '<tr><td><input type="text" name="po' + i + '" style="width: 50px" VALUE=""></td></tr>\n'
              +      '<tr><td><input type="text" name="po' + i + '" style="width: 100px" VALUE=""></td></tr>\n'
              +      '<tr><td><input type="text" name="po' + i + '" style="width: 510px" VALUE=""></td></tr>\n'
              +      '<tr><td><input type="text" name="po' + i + '" style="width: 100px" VALUE=""></td></tr>\n'
              +      '\n';
  }
</script>

    <input type="button" value="Add New Rrow" onclick="addRow('parts')">

Answer 1

使用MooTools或jQuery这样的框架，您会变得更好。 它们使DOM操作变得更加容易和可靠。

Answer 2

我刚试过，它似乎有效。 只需观察要添加到表行中的多余的<tr>标记即可。

这是我使用的最终代码，对我有用。

<html><head>
<script language='javascript' type='text/javascript'>
function addRow(parts) {
    var table = document.getElementById(parts);
    var i = table.rows.length;

    var newRow = table.insertRow(-1);
    newRow.innerHTML =
                '<td>'+ i +'</td><td><input type="text" name="po' + i + '" style="width: 50px" VALUE=""></td>\n'
          + '<td><input type="text" name="po' + i + '" style="width: 100px" VALUE=""></td>\n'
          + '<td><input type="text" name="po' + i + '" style="width: 510px" VALUE=""></td>\n'
          + '<td><input type="text" name="po' + i + '" style="width: 100px" VALUE=""></td>\n'
          + '\n';
  }
</script>
</head><body>
  <table id='parts'>
  <tr>
    <td>ID</td>
    <td style='width: 50px;'>FIELD1</td>
    <td style='width: 100px;'>FIELD2</td>
    <td style='width: 510px;'>FIELD3</td>
    <td style='width: 100px;'>FIELD4</td>
  </tr>
  </table>
  <button type='button' onclick='addRow("parts")'>ADD</button>
</body></html>

<sidenote>

同样，正如Babiker指出的那样，尽管浏览器可能会生成类似以下的查询，但您应该检查输入字段的名称：

?po1=val1&po1=val2&po1=val3 ...

..即在PHP中将作为数组读入$_GET['po1']作为包含元素val ， val2 ， val3等的数组。

..html元素名称在页面中必须是唯一的，并且可能导致某些问题（例如，如果使用<label> ）。 您应该将它们命名为po1[0] ， po1[1]等。

</sidenote>

Answer 3

这个委员会很奇怪，显然不是答案，而是后续问题。

在我的表单中，我还有很多东西，那就是动态函数和表单类型是post，所以不确定使用$ _GET语句指的是什么。

无论如何，它只能看到原始的硬编码输入。 这是我最新的。 没有计数器可以递增并添加到输入名称中，例如quantity1，quantity2等。我不知道，因为我对javascript一无所知。

再次感谢

 <script language='javascript' type='text/javascript'>

函数addRow（parts）{var table = document.getElementById（parts）; var i = table.rows.length;

var newRow = table.insertRow(2);
newRow.innerHTML =
      '<td><input type="text" name="quantity' + i + '" style="width: 50px" VALUE=""></td>\n'
      + '<td><input type="text" name="part_number' + i + '" style="width: 75px" VALUE=""></td>\n'
      + '<td><input type="text" name="partsdesc' + i + '" style="width: 177px" VALUE=""></td>\n'
      + '<td><input type="text" name="supplier' + i + '" style="width: 140px" VALUE=""></td>\n'
      + '<td><input type="text" name="parts_invoice_id' + i + '" style="width: 90px" VALUE=""></td>\n'
      + '<td><input type="text" name="parts_eta' + i + '" style="width: 90px" VALUE=""></td>\n'
      + '<td><input type="text" name="unitprice' + i + '" style="width: 100px" VALUE=""></td>\n'
      + '\n';

}

Javascript以表单形式动态添加输入字段-需要脚本帮助

问题描述

3 个解决方案

解决方案1
1 2010-12-11 00:46:30

解决方案2
0 2010-12-11 01:16:39

解决方案3
0 2010-12-19 18:01:48

Javascript以表单形式动态添加输入字段-需要脚本帮助

问题描述

3 个解决方案

解决方案1 1 2010-12-11 00:46:30

解决方案2 0 2010-12-11 01:16:39

解决方案3 0 2010-12-19 18:01:48

解决方案1
1 2010-12-11 00:46:30

解决方案2
0 2010-12-11 01:16:39

解决方案3
0 2010-12-19 18:01:48