使用JavaScript添加具有输入字段的表行

Question

所以我试图使用JavaScript在表格行中添加额外的输入字段，我似乎无法弄清楚。 我现在的方法是只需插入额外的HTML代码，并在每次有人点击“添加更多”按钮时添加新的表格行。 这是我现在的代码

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>

这是我的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>'; }

它可能在这里有点无组织，但这里是一个链接到代码http://jsfiddle.net/2t9Dh/357/的JSFiddle。 这可能是一个非常简单的错误，如果有人能看到我的问题并帮助我，那就太棒了。 提前致谢。

UPDATE

我正在关闭该函数，并更新id和类名

Answer 1

您的HTML和JavaScript几乎没有问题。

[1]您没有任何ID为“set-form”的元素。 实际上你有一个div“class-form”。

我在表中添加了id，更新的HTML如下所示。

<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] java脚本代码中有许多空格和回车符。

更新的脚本代码是

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

我更新了同样的小提琴。 它现在应该工作。

Answer 2

给一个表Id写下js代码。

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

追加到最后

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

演示

演示2

Answer 3

您尝试编写的功能存在一些问题。 你需要关闭这个功能。 此外，您尝试按ID选择元素，但没有元素具有该ID。 您需要使用getElementsByClassName()来查找最初尝试查找的元素。 您最初尝试定位的<div>元素也未关闭。

如果向该元素追加另一行，则它不在您的表中。 因此，我们需要选择您的表并将html附加到您的表中。 我们还需要修复表的结构。 它目前缺少<thead> ＆ <tbody>元素。 我假设我们可以添加这些元素，但我还假设我们不能添加ID或类名。 添加这些元素后，我们可以专门向<tbody>元素添加行。

您还需要从要追加的html字符串中删除所有多余的空格和（可能是不可见的）新行字符。

成品看起来像这样：

 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> 

Answer 4

问题是没有div宽度的id“set-form”，你将它作为一个类在两个地方。

Answer 5

其他答案已经解决了Javascript和HTML代码的混合问题。

我只是想解决IDs问题。 如果您希望/需要为每个textarea元素设置id属性，则它们必须是唯一的。 这是一个增加id ， name和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);
}