I would like to append a new row of 5 input tags to the <td> element, which is a child of <tr class="unit">, and which is a grandchild of <table id="myTable"> element.
In my Javascript code, I was able to console-log the 5 input tags, but was not able to append them to the <td> element and to the rest of the parent elements.
Is my code on the right track for solving this?
Here's a link to the what I'm doing 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>
Your problem is the form tag which refresh your Web in each button event. Also your JavaScript code have several problems.
So your code should be
<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;
And your javascript and html should be as follow
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>
like this
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);
}
}
This took a lot of work. Here is my answer :)
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>-->
