Javascript動態地添加表單中的輸入字段 - 需要腳本幫助

我有我下載的腳本，因爲我對JavaScript一無所知。我想用這個腳本做的事情是在按鈕之前添加輸入字段，而不是之後。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')">

來源

2010-12-11 Beauford

方的問題：爲什麼會出現四個字段具有相同的名稱？ – Babiker 2010-12-11 00:47:48

@Babiker瀏覽器會將它轉換爲'？po1 = val1＆po1 = val2'等等，這樣就可以工作，儘管它不符合名稱的唯一性，並且可能會在JavaScript方面造成問題。最好明確地命名這些字段：'po1 [0]'，'po1 [1]'等等。 – redShadow 2010-12-11 01:23:46

你好得多，使用類似MooTools或jQuery的框架更好。他們使DOM操作更容易，更可靠。

來源

2010-12-11 00:46:30 bowsersenior

我同意你的看法，這可能是最好的方法。雖然我不知道是否值得添加一個完整的js框架來操縱單一表單，但在更大的應用程序中它肯定是「正確的方式」。 – redShadow 2010-12-11 01:19:56

我剛試過，它似乎工作。只是看額外的<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>

來源

2010-12-11 01:16:39 redShadow

該板是怪異的，顯然不是一個答案，但一個後續問題。

在我的表單中，我有更多的東西，只是動態函數中的內容和表單類型是post，所以不確定你用$ _GET語句引用了什麼。

無論如何，它只能看到原始的硬編碼輸入。這是我擁有的最新版本。是否可以沒有計數器遞增並被添加到輸入名稱中，如quantity1，quantity2等。我不知道，因爲我對JavaScript一無所知。

再次感謝

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

功能addRow（份）{ 變種表=的document.getElementById（份）; 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';

}

來源

2010-12-19 18:01:48 creeve

Javascript動態地添加表單中的輸入字段 - 需要腳本幫助

回答

相關問題