如何在Javascript中將行添加到表中而不立即重置？

我想學習JavaScript，但我正在用一個非常簡單的例子掙扎。如何在Javascript中將行添加到表中而不立即重置？

我有一個表單，我想在每次用戶點擊提交時將其內容添加到「目錄」中的新表格行。

但是，當我使用下面的代碼點擊提交時，我看到新的表格行短暫閃爍，然後消失，就好像頁面正在重置。

當我使用註釋掉的代碼（只是將表單內容附加到body.innerHTML）時，它工作正常。

我在做什麼錯？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4 /loose.dtd"> 
<html> 
<head> 
<title>Javascript test</title> 
</head> 

<script type="text/javascript"> 
function addItem() { 
    var itemName = document.getElementById('item_name').value;  
    var itemPrice = document.getElementById('item_price').value; 

    var newRow = document.createElement('tr'); 
    //var body = document.getElementById('body'); 
    //body.innerHTML += itemName;  
    newRow.innerHTML = "<td>" + itemName + "</td><td>" + itemPrice + "</td>"; 
    var catalog = document.getElementById('catalog'); 
    catalog.appendChild(newRow); 
} 

</script> 

<body id="body"> 
<form><h2>Add an Item to the Catalog</h2> 

<p>Item Name: <input type="text" id="item_name" value="" /> Price: <input type="text" id="item_price" value="" /></p> 

<input type="submit" onClick="addItem()" value="Add" id="submit" /> 
<input type="reset" id="reset" /> 
</form> 

<table id="catalog"></table> 

</body> 
</html>

來源

2011-07-10 Section8

'submit'的輸入類型將在執行JavaScript後提交表單。

如果您將輸入類型更改爲'按鈕'，您將看到您的代碼正常工作。

<input type="button" onClick="addItem()" value="Add" id="submit" />

這也被稱爲'PostBack'，它涉及獲取表單上的輸入字段中的數據，並將其重新發布到頁面上。發佈到頁面的數據可以從服務器端代碼中獲取，作爲進一步操作的基礎。

否則，你的代碼是好的。我唯一的建議是構建td S IN相同的方式，你是構建tr小號

來源

2011-07-10 18:15:29

感謝極快的答案，它的工作，我現在的預期。 – Section8

變化type="submit"到type="button"

來源

2011-07-10 18:21:47 hungryMind

如何在Javascript中將行添加到表中而不立即重置？

回答

相關問題