title: Get value from HTML table input cell with Javascript
body: <p>I have created a HTML table dynamically with Javascript where the first column consists of text fields, the second column consists of input fields and the third column consists of text fields, which works fine:</p>
  
  <pre><code>nrOfRows = document.getElementById("myId").value; //get nrOfRows from input
  var i;
  var row;
  var cell1;
  var cell2;
  var cell3;
  
  for (i = 0; i &lt; nrOfRows; i++) {
  
      row = table.insertRow(i); //table is defined earlier
      cell1 = row.insertCell(0);
      cell2 = row.insertCell(1);
      cell3 = row.insertCell(2);
      cell1.innerHTML = "some text"; //Put "some text" in all column1 fields
      cell2.innerHTML = '&lt;input type="text" class="form-control" size="5" maxlength="4" /&gt;'; //Make all fields in column2 input fields.
  
  }
  </code></pre>
  
  <p>After this I type something in the input fields (column2) and try to take this input and put it in column3, by doing this:</p>
  
  <pre><code>for (var r = 0; r &lt; nrOfRows; r++) {    
          table.rows[r].cells[2].innerHTML = table.rows[r].cells[1].innerHTML;
      }
  </code></pre>
  
  <p>This does not work. Instead of putting the <em>values</em> from the input fields in the third column it replaces the text fields in the third columns with <em>new input fields</em>, like it is taking the HTML code instead of the values. </p>
  
  <p>This works (taking the values from column1 into column3):</p>
  
  <pre><code>  for (var r = 0; r &lt; nrOfRows; r++) {  
          table.rows[r].cells[2].innerHTML = table.rows[r].cells[0].innerHTML;
      }
  </code></pre>
  
  <p>Any clues on how I can get the values from the input fields instead of the HTML code for it?</p>
  
  <p>This is what I get. I want the numbers from the middle column to go into the right column, but instead it replaces everything with new input fields:</p>
  
  <p><img src="https://i.stack.imgur.com/7SnsL.png" alt="screenshot"></p>