我用HTML設計了一個表單如下
<table id="table" style="float:inherit">
<tr><th>物品名稱</th><th>數量</th><th>小計</th></tr>
<tr>
<td><input type="text" name="item[]" require></td>
<td><input type="text" name="many[]" require></td>
<td><input type="text" name="total[]" require></td>
</tr>
</table>
<input type="button" id="btn1" value="新增一項物品"><br/>
預設是只有一欄可以讓使用者輸入
因為不知道使用者有多少筆資料要輸入，所以我設計一個按鈕讓使用者自行新增輸入欄位
如下：
<script>
window.onload = function(){
document.getElementById("btn1").onclick = newitem;
};
function newitem(){
document.getElementById("table").innerHTML+=
"<tr><td><input type=\"text\" name=\"item[]\" require></td>
<td><input type=\"text\" name=\"many[]\" require></td>
<td><input type=\"text\" name=\"total[]\" require></td></tr>";
}
</script>
可是，如果使用者已經輸入了內容在原有的欄位裡面
按下按鈕新增欄位之後，原本已經輸入的內容就會被清空
能有什麼解決的辦法嗎?

改 innerHTML 元件會重繪，用 appendChild 應該可行但我好像有在 IE 遇過 tbody 不給改的狀況就是了.

一樓正解 不過你可以考慮用jQuery 會輕鬆非常多或者類似工具

$(document).find('input').each(function{$(this).Val('')})

用jquery append吧！

appendChild就可以了，不用特別載入jquery用變數存document.createElement('tr')，再塞innerHTML然後用appendChild加到table裡面