javascript 将 html 输入添加到表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19995927/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding html input to table
提问by user2995314
I can't get the codes to work. Can somebody point out what have I done wrong? I just want to print the input to a table using JavaScript.
我无法让代码工作。有人可以指出我做错了什么吗？我只想使用 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
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);
});
采纳答案by zzlalani
You are missing
你不见了
var row= document.createElement("tr");
before the line
行前
var td1 = document.createElement("td");
and in the end });is a syntax error. replace it with }
最后});是语法错误。将其替换为}
Fiddle:http://jsfiddle.net/Sg2vD/
小提琴：http : //jsfiddle.net/Sg2vD/
回答by achan1989
javascript code here
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);
}
回答by AZee
If you are using table, it is best practice to create thead and tbody elements in the table to separate the header and the body. Use the tbody to display your form input. There are some syntax error at the end of your addRow javascript function and missing row element.
如果您使用 table，最好在 table 中创建 thead 和 tbody 元素以分隔标题和正文。使用 tbody 显示您的表单输入。addRow javascript 函数的末尾有一些语法错误并且缺少行元素。
Here is the code:
这是代码：
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/
小提琴：http : //jsfiddle.net/HypdD/
