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> s）。您应该将它们命名为po1[0]，po1[1]等。

</sidenote>

Answer 3

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

在我的表单中，我有更多内容，只是动态函数中的内容和表单类型是post，因此不确定您使用$ _GET语句引用的是什么。

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

再次感谢

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

function 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 个答案: