如何使用JavaScript來生成HTML表單？

我正在創建一個簡單的Web應用程序，用戶可以使用該應用程序編寫附加文件的消息。如何使用JavaScript來生成HTML表單？

multiple html file inputs with javascript link http://img38.imageshack.us/img38/4474/attachments.gif

即「附加其他文件」鏈接尚不能工作。它應該在每次點擊時向表單添加一個額外的文件輸入控件。

我需要一個JavaScript方法addanotherfileinput（）更換點擊主播：

 <a href="#" id="attachlink" onclick="addanotherfileinput">attach additional files</a>

有了這個新錶行，文件輸入和錨：

 <input type="file" name="Attachment1" id="Attachment1" class="textinput" /> 
    </td> 
</tr> 
<tr> 
    <td></td> 
    <td> 
     <a href="#" id="attachlink" onclick="addanotherfileinput">attach additional files</a>

而且還增加了編號：附件2，附件3，附件4等

我該怎麼做？

來源

2009-08-25 Zack Peterson

你可以使用DOM來動態插入的文件輸入

var myTd = /* Get the td from the dom */ 

var myFile = document.createElement('INPUT'); 
myFile.type = 'file' 
myFile.name = 'files' + i; // i is a var stored somewhere 
i++; 

myTd.appendChild(myFile);

或者您可以使用此

http://developer.yahoo.com/yui/examples/uploader/uploader-simple-button.html

來源

2009-08-25 18:20:45 Zoidberg

注意：我將所有文件輸入到一個TD中，在您的情況下，您可能想要創建一個新的行，但這樣做與我在這裏做的大致相同......它只是添加一個文檔中還有更多的dom元素。 – Zoidberg 2009-08-25 18:25:37

有可能是一個更好的辦法，但我通過做這個客戶端創建一組HTML表單元素，然後使用JavaScript隱藏/顯示行來更新CSS類。

編輯：我會留下這裏作爲替代方法，但我喜歡通過DOM更好地添加INPUT元素的想法。

來源

2009-08-25 18:20:58 Mayo

你可能不想替換成這個錨點，只是在它前面插入一些東西。

我使用Prototype這樣的事情，因爲它消除了很多瀏覽器的不一致性，特別是在表格和表格中。

使用原型，它會是這個樣子：

function insertFileField(element, index) { 
    element.insert({ 
     before: "<input type='file' name='Attachment" + index + " class='textinput'>" 
    }); 
} 

// And where you're hooking up your `a` element (`onclick` is very outdated, 
// best to use unubtrustive JavaScript) 
$('attachlink').observe('click', function(event) { 
    event.stop(); 
    insertFileField(this, this.up('form').select('input[type=file]').length + 1); 
});

...在末尾位找到包含鏈接的形式，找出多少input小號file型的也有，並增加了一個用於索引。

通過Prototype提供的Element構造函數，還有其他的方法，但是文本工作得很好（實際上它通常要快得多）。

它與jQuery，MooTools，YUI，Glow或任何其他JavaScript框架類似，但略有不同。

來源

2009-08-25 18:26:28

如何使用JavaScript來生成HTML表單？

回答

相關問題