Добавление ввода html в таблицу

Question

Я не могу заставить коды работать. Может кто-нибудь указать, что я сделал неправильно? Я просто хочу распечатать входные данные в таблицу с помощью JavaScript.

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); 
}); 

Answer 1

Вы отсутствуют

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

перед линией

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

и в конце }); является синтаксической ошибкой. заменить его }

Fiddle:http://jsfiddle.net/Sg2vD/

Answer 2

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); 

} 

Answer 3

Если вы используете таблицу, то лучше практика, чтобы создать THEAD и TBODY элементов в таблице, чтобы отделить заголовок и тело. Используйте tbody для отображения ввода формы. В конце вашего javascript-функции addRow и отсутствующего элемента строки есть некоторая синтаксическая ошибка.

Вот код:

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> 

Fiddle:http://jsfiddle.net/HypdD/