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

Question

I have the following script which I downloaded as I know nothing about javascript. 我下载了以下脚本，因为我对javascript一无所知。 What I want to do with this script is have the input fields added before the button instead of after it. 我要对此脚本执行的操作是在按钮之前而不是按钮之后添加输入字段。

I already have one set of input fields hardcoded with titles, so I just want the new ones to be added under them and before the button. 我已经有一组用标题硬编码的输入字段，所以我只想将新的输入字段添加到它们的下方和按钮之前。

Any help is appreciated. 任何帮助表示赞赏。

Not sure how to show code here as none of the code links seem to do anything, so if someone can let me know I will post the code. 不确定如何在此处显示代码，因为没有任何代码链接似乎没有任何作用，因此，如果有人可以告诉我，我将发布代码。

    <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

You are much, much better off using a framework like MooTools or jQuery. 使用MooTools或jQuery这样的框架，您会变得更好。 They make DOM manipulation much easier and more reliable. 它们使DOM操作变得更加容易和可靠。

Answer 2

I just tried it and it seems to work. 我刚试过，它似乎有效。 Just watch the extra <tr> tags you are adding to the table row.. 只需观察要添加到表行中的多余的<tr>标记即可。

This is the final code I used, that works for me. 这是我使用的最终代码，对我有用。

<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>

Also, as Babiker pointed out, you should check your input fields names, although the browser will probably build a query like: 同样，正如Babiker指出的那样，尽管浏览器可能会生成类似以下的查询，但您应该检查输入字段的名称：

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

..that ie in PHP will be read as an array into $_GET['po1'] as an array with elements val , val2 , val3 , etc. etc... ..即在PHP中将作为数组读入$_GET['po1']作为包含元素val ， val2 ， val3等的数组。

..html elements names must be unique in the page, and that could cause some problems, (for example, if you use <label> s). ..html元素名称在页面中必须是唯一的，并且可能导致某些问题（例如，如果使用<label> ）。 You should instead name them po1[0] , po1[1] , etc.. 您应该将它们命名为po1[0] ， po1[1]等。

</sidenote>

Answer 3

This board is weird, obviously not an answer but a followup question. 这个委员会很奇怪，显然不是答案，而是后续问题。

In my form I have a lot more that just what is in the dynamic function and the form type is post, so not sure of what your referring to with the $_GET statement. 在我的表单中，我还有很多东西，那就是动态函数和表单类型是post，所以不确定使用$ _GET语句指的是什么。

In any event, it only sees the original hard coded input. 无论如何，它只能看到原始的硬编码输入。 This is the latest I have. 这是我最新的。 Can there not be a counter that increments and gets added to the input name, like quantity1, quantity2, etc. I have no idea as I know nothing of javascript. 没有计数器可以递增并添加到输入名称中，例如quantity1，quantity2等。我不知道，因为我对javascript一无所知。

Thanks again 再次感谢

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

function addRow(parts) { var table = document.getElementById(parts); 函数addRow（parts）{var table = document.getElementById（parts）; var i = table.rows.length; 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