添加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输入到表

回答

相关问题