Insert a new row of input tags using JavaScript

Question

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>

caballerog · Accepted Answer · 2015-12-04 15:52:41Z

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;

noisybuddha · Accepted Answer · 2015-12-04 15:28:11Z

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>

Pavel Kučera · Accepted Answer · 2015-12-04 15:29:35Z

0

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);
            }  

            }

edited Dec 4, 2015 at 15:29

answered Dec 4, 2015 at 15:24

Pavel Kučera

11710 bronze badges

4 Comments

Johnny G. Over a year ago

thank you for your answer- is there a reason why when i click to run the function, it momentarily appends the new row of inputs and then disappears?

caballerog Over a year ago

Yes, in my answer is the reason (refresh form)

Pavel Kučera Over a year ago

Add parameter type="button" to button control, caballerog - your ansfer code create many inputs like many rows, in your "for" must by number of inputs (5) no number of rows in table.

caballerog Over a year ago

That's true. I edited quickly (original version only 5)

www139 · Accepted Answer · 2015-12-04 15:34:39Z

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>-->

thanks for your answer- i was going in that direction as well. your answer made a lot of sense. :)

Collectives™ on Stack Overflow

Insert a new row of input tags using JavaScript

4 Answers 4

Comments

Comments

4 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related