如何使用给定行的html表中的输入字段创建动态行 [英] how to create dynamic row with input fields in html table from given row
本文介绍了如何使用给定行的html表中的输入字段创建动态行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是Html和javascript的新手。我想在表格中创建带有输入字段的动态行，同时单击按钮，即用户给出的行数。在我的代码中，行动态创建但不附加prevoius行。它创造了新鲜。但是，如果已经创建了表格，我想追加行。
Im new for Html and javascript. I want to create dynamic row with input fields in table while click button,that number of row given from user. In my code, row created dynamically but its not append prevoius one. Its created freshly. But ,I want to append row if table already created.
这里我的代码：
function createTable() {
var a;
a = document.getElementById('tb1').value;
if (a == "") {
alert("Please enter some numeric value");
} else {
var rows = "<th>Item Name</th><th>Quantity</th><th>QuantityType</th><th>Amount</th>";
for (var i = 0; i < a; i++) {
rows += "<tr><td><input type='text' name='" + "name".concat(i+1) + "'></td><td><input type='text' name='" + "quantity".concat(i+1) + "'></td><td><input type='text' name='" + "qtype".concat(i+1) + "'></td><td id='amt'><input type='text' id='sum' onkeyup='myfunction(this.value);' name='" + "total".concat(i+1) + "'></td></tr>";
}
document.getElementById("table").innerHTML = rows;
}
}
div {
background: red;
margin: 5px;
}
table {
border: 2px solid black;
}
td {
padding: 10px;
border: 1px solid lightgrey;
}
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text" id="tb1"/>
<button type="button" onclick='createTable()'>Click Me!</button>
<table id="table" class="order-table table" name="table1" required>
</table>
</body>
</html>
请有人帮忙！
提前致谢..
推荐答案
使用
Element.appendChild而不是innerHTML
-
Element.firstChild将返回first-child元素。 -
querySelectorAll将根据指定的选择器返回NodeList。 -
Element.appendChild会在元素中附加新的节点，而不会影响元素中的现有内容。 Element.firstChildwill returnfirst-childof the element.querySelectorAllwill returnNodeListas per the specified selector.Element.appendChildwill append newNodein the Element without affecting existing content in the Element.
function createTable() {
var a = document.getElementById('tb1').value;
if (a == "") {
alert("Please enter some numeric value");
} else {
var th = document.querySelectorAll('#table th');//To check whether `TD` is appended in table or not!
if (!th.length) {
//If not appended, then append TD in table
var rows = "<th>Item Name</th><th>Quantity</th><th>QuantityType</th><th>Amount</th>";
var table = document.createElement('table');
table.innerHTML = rows;
document.getElementById("table").appendChild(table.firstChild);
}
for (var i = 0; i < a; i++) {
var elems = '';
elems += "<tr><td><input type='text' name='" + "name".concat(i + 1) + "'></td><td><input type='text' name='" + "quantity".concat(i + 1) + "'></td><td><input type='text' name='" + "qtype".concat(i + 1) + "'></td><td id='amt'><input type='text' id='sum' onkeyup='myfunction(this.value);' name='" + "total".concat(i + 1) + "'></td></tr>";
var table = document.createElement('table');
table.innerHTML = elems;
document.getElementById("table").appendChild(table.firstChild);
}
}
}
div {
background: red;
margin: 5px;
}
table {
border: 2px solid black;
}
td {
padding: 10px;
border: 1px solid lightgrey;
}
<input type="text" id="tb1" />
<button type="button" onclick='createTable()'>Click Me!</button>
<table id="table" class="order-table table" name="table1" required>
</table>
这篇关于如何使用给定行的html表中的输入字段创建动态行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
