Using JavaScript to add a table rows that have input fields

Question

So I'm trying to add extra input fields within a table row using JavaScript, and I can't seem to figure out. My approach right now is to just insert extra html code and add a new table row every time someone clicks the "add more" button. Here's my code right now

HTML

<div class="set-form">
<table class="table table-bordered">
<tr>
  <th>Question</th>
  <th>Answer</th>
</tr>
<tr>
  <td>
    <textarea name="Question" placeholder="Question" th:field="${questionAnswerSet.question}" id="question" style="resize: none; width: 100%;"></textarea>
  </td>
  <td>
    <textarea name="Answer" placeholder="Answer" th:field="${questionAnswerSet.answer}" id="answer" style="resize: none; width: 100%;"></textarea>
  </td>
</tr>
</table>
<div class="set-form">
<input type="button" id="more_fields" onclick="add_fields();" value="Add More" class="btn btn-info" />
</div>

And Here's my JavaScript

function add_fields() {
document.getElementById('set-form').innerHTML += '<tr> < td > <   textarea name = "Question"
placeholder = "Question"
th: field = "${questionAnswerSet.question}"
id = "question"
style = "resize: none; width: 100%;" > < /textarea></td >
< td > < textarea name = "Answer"
placeholder = "Answer"
th: field = "${questionAnswerSet.answer}"
id = "answer"
style = "resize: none; width: 100%;" > < /textarea></td >
< /tr>'; }

It may be a little unorganized on here, but here's a link to a JSFiddle of the code http://jsfiddle.net/2t9Dh/357/. It's probably a pretty simple mistake, if anyone can see my issue and help me out, that would be great. Thanks in advance.

UPDATE

I'm closing the function, and updating the id and class names

Answer 1

give a table Id write below js code.

<div class="set-form">
  <table id="myTable" class="table table-bordered">
    <tr>
      <th>Question</th>
      <th>Answer</th>
    </tr>
    <tr>
      <td>
        <textarea name="Question" placeholder="Question" th:field="${questionAnswerSet.question}" id="question" style="resize: none; width: 100%;"></textarea>
      </td>
      <td>
        <textarea name="Answer" placeholder="Answer" th:field="${questionAnswerSet.answer}" id="answer" style="resize: none; width: 100%;"></textarea>
      </td>
    </tr>
  </table>
  <div class="set-form">
    <input type="button" id="more_fields" onclick="add_fields();" value="Add More" class="btn btn-info" />
</div>


function add_fields() {    
document.getElementById("myTable").insertRow(0).innerHTML = '<tr><td><textarea name="Question" placeholder="Question" th:field="${questionAnswerSet.question}" id="question" style = "resize: none; width:100%;"></textarea></td><td><textarea name="Answer" placeholder ="Answer" th: field="${questionAnswerSet.answer}" id="answer" style="resize:none;width: 100%;"></textarea></td ></tr>';
}

Append to last

function add_fields() {    
document.getElementById("myTable").insertRow(-1).innerHTML = '<tr><td><textarea name="Question" placeholder="Question" th:field="${questionAnswerSet.question}" id="question" style = "resize: none; width:100%;"></textarea></td><td><textarea name="Answer" placeholder ="Answer" th: field="${questionAnswerSet.answer}" id="answer" style="resize:none;width: 100%;"></textarea></td ></tr>';
}

Demo

Demo 2

Answer 2

Few issues are there with your HTML and JavaScript.

[1]You do not have any element with id "set-form". Actually you have a div with class "set-form".

I added id to the table and the updated HTML is below.

<div class="set-form">
  <table id="tab_qn_ans" class="table table-bordered">
    <tr>
      <th>Question</th>
      <th>Answer</th>
    </tr>
    <tr>
      <td>
        <textarea name="Question" placeholder="Question" th:field="${questionAnswerSet.question}" id="question" style="resize: none; width: 100%;"></textarea>
      </td>
      <td>
        <textarea name="Answer" placeholder="Answer" th:field="${questionAnswerSet.answer}" id="answer" style="resize: none; width: 100%;"></textarea>
      </td>
    </tr>
  </table>
  <div class="set-form">
    <input type="button" id="more_fields" onclick="add_fields();" value="Add More" class="btn btn-info" />
  </div>

[2]There are many spaces and carriage returns in your java script code.

Updated script code is

function add_fields() {
  document.getElementById('tab_qn_ans').innerHTML += '<tr> <td> <textarea name = "Question" placeholder = "Question" th: field = "${questionAnswerSet.question}" id = "question" style = "resize: none; width: 100%;" ></textarea></td> <td> <textarea name = "Answer" placeholder = "Answer" th: field = "${questionAnswerSet.answer}" id = "answer" style = "resize: none; width: 100%;"></textarea></td> </tr>';
}

I updated the same fiddle. It should work now.

Answer 3

The mix of Javascript and HTML code has already been addressed by the other answers.

I just want to address the IDs problem. If you want/need to have id property for each textarea element they need to be unique. Here is a solution that increments the id, name and placeholder http://jsfiddle.net/068jtqLz/

function add_fields() {
  var table = document.getElementById('myTable');

  var nextIndex = table.childNodes.length;

  var newRow = document.createElement("TR");
  var firstCell = document.createElement("TD");
  var firstCellTextarea = document.createElement("TEXTAREA");
  var secondCell = document.createElement("TD");
  var secondCellTextarea = document.createElement("TEXTAREA");

  firstCellTextarea.setAttribute("id", "question" + nextIndex);
  firstCellTextarea.setAttribute("name", "Question + nextIndex");
  firstCellTextarea.setAttribute("placeholder", "Question" + nextIndex);
  firstCellTextarea.setAttribute("th:field", "${questionAnswerSet.question}");
  firstCellTextarea.setAttribute("style", "resize: none; width: 100%;");

  secondCellTextarea.setAttribute("id", "answer" + nextIndex);
  secondCellTextarea.setAttribute("name", "Answer + nextIndex");
  secondCellTextarea.setAttribute("placeholder", "Answer" + nextIndex);
  secondCellTextarea.setAttribute("th:field", "${questionAnswerSet.answer}");
  secondCellTextarea.setAttribute("style", "resize: none; width: 100%;");

  firstCell.appendChild(firstCellTextarea);
  secondCell.appendChild(secondCellTextarea);

  newRow.appendChild(firstCell);
  newRow.appendChild(secondCell);

  table.appendChild(newRow);
}

Answer 4

There are a few problems with the function you were trying to write. You need to close the function. Also, you are trying to select an element by ID, but no element has that ID. You would need to use getElementsByClassName() to find the element you were originally trying to find. The <div> element your were originally trying to target also was not closed.

If you append another row to that element, it will not be within your table. So, we need to select your table and append the html to your table. We also will need to fix the structure of the table. It is currently missing <thead> & <tbody> elements. I assume we can add those elements, but I will also assume that we can not add ID or class names. Once these elements are added, we can add rows specifically to the <tbody> element.

You also need to remove all extra spaces and (likely invisible) new line characters from the string of html you want to append.

The finished product would look like this:

function add_fields() {
  document.getElementsByClassName('table')[0].getElementsByTagName('tbody')[0].innerHTML += '<tr><td><textarea name="Question" placeholder="Question" th:field="${questionAnswerSet.question}" id="question" style="resize: none; width: 100%;"></textarea></td><td><textarea name="Answer" placeholder="Answer" th:field="${questionAnswerSet.answer}" id="answer" style="resize: none; width: 100%;"></textarea></td></tr>';
}

<div class="set-form">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>Question</th>
        <th>Answer</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <textarea name="Question" placeholder="Question" th:field="${questionAnswerSet.question}" id="question" style="resize: none; width: 100%;"></textarea>
        </td>
        <td>
          <textarea name="Answer" placeholder="Answer" th:field="${questionAnswerSet.answer}" id="answer" style="resize: none; width: 100%;"></textarea>
        </td>
      </tr>
    </tbody>
  </table>
</div>
<div class="set-form">
  <input type="button" id="more_fields" onclick="add_fields();" value="Add More" class="btn btn-info" />
</div>