使用JavaScript插入一行新的输入标记
Insert a new row of input tags using JavaScript
我想向<td>元素添加一行新的5个输入标记，它是<tr class="unit">的子元素，也是<table id="myTable">元素的孙元素。
在我的Javascript代码中，我能够控制台记录5个输入标记，但无法将它们附加到<td>元素和其他父元素。
我的代码在解决这个问题的正确轨道上吗？
这是我正在做的事情的链接http://codepen.io/johnnyginbound/pen/xZxZNo?editors=101
function addRow(){
var parentTable = document.getElementById('myTable');
var tableRow = document.getElementsByTagName('tr')[0].children;
var unitTables = document.getElementsByClassName('unit-table')[0];
var newInputType = document.createElement('input');
newInputType.setAttribute('type', 'text');
for(var i=0; i<unitTables.children.length; i++){
var appendedInput = unitTables.children[i].appendChild(newInputType)
parentTable.appendChild(appendedInput);
}
}
document.getElementById('add_btn').onclick=addRow;<form>
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p> ASME Email: </p>
<input type="text" name="email">
<br />
<br />
</div>
<!-- Table -->
<table id="myTable" class="table">
<tr>
<th> Technology </th>
<th> Markets </th>
<th> Enduring/Emerging </th>
<th> ASME Relevency </th>
<th> Comments </th>
</tr>
<tr class="unit-table">
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
</tr>
<tr class="unit-table">
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
</tr>
<tr class="unit-table">
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
</tr>
</table>
</div>
<button id="add_btn">Add new row</button>
<input type="submit" name="submit" value="Submit">
</form>您的问题是在每个按钮事件中刷新Web的表单标记。此外，您的JavaScript代码也存在一些问题。
所以你的代码应该是
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p> ASME Email: </p>
<input type="text" name="email">
<br />
<br />
</div>
<!-- Table -->
<table id="myTable" class="table">
<tr>
<th> Technology </th>
<th> Markets </th>
<th> Enduring/Emerging </th>
<th> ASME Relevency </th>
<th> Comments </th>
</tr>
<tr class="unit-table">
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
</tr>
<tr class="unit-table">
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
</tr>
<tr class="unit-table">
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
</tr>
</table>
</div>
JavaScript
function addRow(){
var parentTable = document.getElementById('myTable');
var myTd,myInput;
var myTr = document.createElement('tr');
myTr.setAttribute('class','unit-table');
for (var i=0; i<5;i++){
myTd = document.createElement('td');
myInput = document.createElement('input');
myInput.setAttribute('type','text');
myTd.appendChild(myInput);
myTr.appendChild(myTd);
}
parentTable.appendChild(myTr);
}
document.getElementById('add_btn').onclick=addRow;
您的javascript和html应该如下所示
function addRow(){
var table = document.getElementById("myTable");
var rows = document.getElementById("myTable").rows.length;
var table = document.getElementById("myTable");
var rows = document.getElementById("myTable").rows.length;
// add row
var row = table.insertRow(rows);
// add input in cell
for(var i = 0; i < 5; i++){
var cell1 = row.insertCell(i);
var inputItem = document.createElement('input');
cell1.appendChild(inputItem);
}
}
document.getElementById('add_btn').onclick=addRow;<form>
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p> ASME Email: </p>
<input type="text" name="email">
<br />
<br />
</div>
<!-- Table -->
<table id="myTable" class="table">
<tr>
<th> Technology </th>
<th> Markets </th>
<th> Enduring/Emerging </th>
<th> ASME Relevency </th>
<th> Comments </th>
</tr>
<tr class="unit-table">
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
</tr>
<tr class="unit-table">
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
</tr>
<tr class="unit-table">
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
</tr>
</table>
</div>
<input type="submit" name="submit" value="Submit">
</form>
<button id="add_btn">Add new row</button>像这个
function addRow(){
var table = document.getElementById("myTable");
var rows = document.getElementById("myTable").rows.length;
// add row
var row = table.insertRow(rows);
// add input in cell
for(var i = 0; i < 5; i++){
var cell1 = row.insertCell(i);
var inputItem = document.createElement('input');
cell1.appendChild(inputItem);
}
}
这需要大量的工作。这是我的答案：）
https://jsfiddle.net/www139/1jwf02p7/
function addRow() {
var table = document.getElementById('myTable');
var columnLength = table.getElementsByTagName('tr')[0].children.length;
var units = document.getElementsByClassName('unit-table');
var tr = document.createElement('tr');
tr.className = 'unit-table';
for (var i = 0; i < columnLength; i++) {
var td = document.createElement('td');
var text = document.createElement('input');
text.type = 'text';
td.appendChild(text);
tr.appendChild(td);
}
table.appendChild(tr);
}
document.getElementById('add_btn').onclick = addRow;<!--<form>-->
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>ASME Email:</p>
<input type="text" name="email">
<br />
<br />
</div>
<!-- Table -->
<table id="myTable" class="table">
<tr>
<th>Technology</th>
<th>Markets</th>
<th>Enduring/Emerging</th>
<th>ASME Relevency</th>
<th>Comments</th>
</tr>
<tr class="unit-table">
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
</tr>
<tr class="unit-table">
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
</tr>
<tr class="unit-table">
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
<td>
<input type="text">
</td>
</tr>
</table>
</div>
<button id="add_btn">Add new row</button>
<input type="submit" name="submit" value="Submit">
<!--</form>-->相关文章：
- 如何要求用户输入一个介于 1 和 50 之间的整数，然后小程序打印出一行这个星数
- 无法破解pass-css插件以使两个输入元素出现在一行中
- 在同一行中对齐选择、输入、提交而不向下
- Javascript 在单击时将输入值更改为单击按钮的同一行上的值
- 如何获取新表行仅当先前输入的一行不为空时才单击
- Jquery.on(change）事件on<选择>输入仅更改第一行
- 激活输入的复选框有效，但如果一行输入重复，它的行为会很奇怪
- 如何为一行文本输入字段添加用户可编辑的文本标签
- 使用JavaScript插入一行新的输入标记
- 我如何在点击按钮时使一行ng重复中的输入只读
- 如何按顺序给出数字即使我删除了一行输入，顺序也不应该重复
- Javascript关注前一行's的第一个输入
- 根据具有用户输入的另一行的值在表中插入一行
- 我如何触发模糊和运行通过所有输入在一行
- 将文本添加到每个单选输入的同一行
- 在使用可能的计时器检测到输入后自动移动到下一行
- Jquery移动到下一行's输入元素的id
- 单击表中同一行中的锚标记时，选择同一行中的输入标记
- 我的正则表达式只需一行输入即可正常工作，但不要't有两个或两个以上.
- 如何在Angular中使用ng-click函数设置最后一行输入的焦点
