我想将新行的 5 个输入标记附加到 <td>
元素,它是 <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>
最佳答案
您的问题是在每个按钮事件中刷新您的网页的表单标记。另外,您的 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 - 使用 JavaScript 插入新的一行输入标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34091136/