html - Using JavaScript to add a table rows that have input fields

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

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

Share Improve this question edited Jan 19, 2016 at 19:23 asked Jan 19, 2016 at 19:13 dochsner 2492 gold badges8 silver badges26 bronze badges

Have you checked the console for errors? – hopkins-matt Commented Jan 19, 2016 at 19:16
You are doing document.getElementById('set-form') while having class set-form in the markup. – Nikolay Ermakov Commented Jan 19, 2016 at 19:19
Yes it says Uncaught ReferenceError: add_fields is not defined, I'm fairly new to javascript, so I'm not entirely sure what that means – dochsner Commented Jan 19, 2016 at 19:19
Well, I would see what's wrong with that function. At first glance you should close the function. – hopkins-matt Commented Jan 19, 2016 at 19:20
jsfiddle.net/2t9Dh/387 – Jakir Hossain Commented Jan 19, 2016 at 20:05

Add a comment |

5 Answers 5

Sorted by: Reset to default 4

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

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.

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

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>

The problem is that there is no div width an id "set-form", you have it as a class on two places though.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

html - Using JavaScript to add a table rows that have input fields - Stack Overflow

5 Answers 5

与本文相关的文章

评论列表(0)