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