添加html輸入到表

我無法讓代碼工作。有人可以指出我做錯了什麼嗎？我只想使用JavaScript將輸入打印到表格中。添加html輸入到表

HTML

Item: 
<input type="text" name="item" id="item" /><br /> 
Quantity: 
<input type="text" name="quantity" id="quantity" /><br /> 
Price: AUD 
<input type="text" name="price" id="price" /><br /><br /> 
<input type="button" value="Add Product +" onClick="addRow()" id="add"><br /><br /> 

<table id="table" border="1"> 
    <tr> 
     <th>Item</th> 
     <th>Quantity</th> 
     <th>Price</th> 
    </tr> 
</table>

的JavaScript

function addRow() { 
    "use strict"; 

    var table = document.getElementById("table"); 
    var td1 = document.createElement("td"); 
    var td2 = document.createElement("td"); 
    var td3 = document.createElement("td");  

    td1.innerHTML = document.getElementById("item").value; 
    td2.innerHTML = document.getElementById("quantity").value; 
    td3.innerHTML = document.getElementById("price").value; 

    row.appendChild(td1); 
    row.appendChild(td2); 
    row.appendChild(td3); 

    table.children[0].appendChild(row); 
});

來源

2013-11-15 user2995314

哪裏變量'row'從何而來？您的Java腳本控制檯（例如Firebug）會在執行代碼時顯示這是一個錯誤。 – reto

您沒有名爲'row'的對象。 – Carlangueitor

什麼是''使用嚴格的「;'和你的函數在哪裏關閉'}'括號。 – Roopendra

前行你缺少

var row= document.createElement("tr");

var td1 = document.createElement("td");

最後});是語法錯誤。與}

小提琴代替它：http://jsfiddle.net/Sg2vD/

來源

2013-11-15 07:51:14 zzlalani

謝謝..我不知道爲什麼小提琴最初沒有顯示任何錯誤。我做了修改，但沒有運行。你能指出我還沒有做什麼？謝謝小提琴：http：//jsfiddle.net/michelle_low/VHLdE/ – user2995314

檢查這個http://jsfiddle.net/VHLdE/1/ ..在左側窗口中第二個下拉列表設置爲'onload'它應該在'否包裝 - 在' – zzlalani

啊我明白了。謝謝。你介意解釋爲什麼它不工作，如果設置爲onload？ – user2995314

的JavaScript這裏代碼

function addRow() 
{ 
    var table = document.getElementById("table"); 
    var row = document.createElement("tr"); 
    var cell = document.createElement("td"); 
    var cellText = document.createTextNode(document.getElementById("item").value); 
    cell.appendChild(cellText); 
    row.appendChild(cell); 

    var cell = document.createElement("td"); 
    var cellText = document.createTextNode(document.getElementById("quantity").value); 
    cell.appendChild(cellText); 
    row.appendChild(cell); 

    var cell = document.createElement("td"); 
    var cellText = document.createTextNode(document.getElementById("price").value); 
    cell.appendChild(cellText); 
    row.appendChild(cell); 
    table.appendChild(row); 

}

來源

2013-11-15 08:06:42 achan1989

如果您正在使用的表，它在表頭分離，以創建THEAD和TBODY元素的最佳實踐和身體。使用tbody顯示您的表單輸入。 addRow javascript函數末尾有一些語法錯誤，並且缺少行元素。

下面是代碼：

Item: 
<input type="text" name="item" id="item" /> 
<br />Quantity: 
<input type="text" name="quantity" id="quantity" /> 
<br />Price: AUD 
<input type="text" name="price" id="price" /> 
<br /><br /> 
<input type="button" value="Add Product +" onClick="addRow()" id="add"> 
<br /><br /> 
<table id="table" border="1"> 
<thead id="table-head"> 
<tr> 
    <th>Item</th> 
    <th>Quantity</th> 
    <th>Price</th> 
</tr> 
</thead> 
<tbody id="table-body"> 
</tbody> 
</table> 
<script> 
function addRow() { 
"use strict"; 

var tableBody = document.getElementById("table-body"); 
var td1 = document.createElement("td"); 
var td2 = document.createElement("td"); 
var td3 = document.createElement("td");  
var row = document.createElement("tr"); 

td1.innerHTML = document.getElementById("item").value; 
td2.innerHTML = document.getElementById("quantity").value; 
td3.innerHTML = document.getElementById("price").value; 

row.appendChild(td1); 
row.appendChild(td2); 
row.appendChild(td3); 

tableBody.appendChild(row); 
} 
</script>

小提琴：http://jsfiddle.net/HypdD/

來源

2013-11-15 08:25:36 AZee

謝謝，但我不能讓它在小提琴的工作。我做了修改，但沒有任何改變。 http://jsfiddle.net/michelle_low/VHLdE/ – user2995314

添加html輸入到表

回答

相關問題