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

所以我想使用JavaScript在表行中添加额外的输入字段，我似乎无法弄清楚。我现在的做法是插入额外的html代码，并在每次有人点击“添加更多”按钮时添加一个新的表格行。这里是我的代码，现在使用JavaScript添加一个具有输入字段的表行

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和类名

来源

2016-01-19 dochsner

你检查错误控制台的解决方案？ –

您在标记中使用'set-form'类时正在执行'document.getElementById（'set-form'）'。 –

是的，它说'未捕获的ReferenceError：add_fields没有定义'，我对JavaScript相当新，所以我不完全确定这意味着什么 – dochsner

给下面的js代码表ID写。

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

Demo

Demo 2

来源

2016-01-19 19:44:05

不错，谢谢！你解决了我的下一个问题以及追加到最后的解决方案 – dochsner

的问题是，没有宽度的div ID为“设置表”，你有它作为尽管在两个地方上课。

来源

2016-01-19 19:19:21

有很多比这个错误 –

至少他列出了一个问题 –

你的HTML和JavaScript几乎没有什么问题。

[1]您没有任何id为“set-form”的元素。其实你有一个与“套餐”类的div。

我在表中添加了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>'; 
}

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

来源

2016-01-19 19:23:39

它现在工作，我只需要更新我的项目。谢谢！ – dochsner

您尝试编写的函数有几个问题。您需要关闭该功能。此外，您试图通过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>

来源

2016-01-19 19:30:43

的JavaScript组合和HTML代码已经被其他的答案解决。

我只想解决IDs问题。如果您想/需要为每个textarea元素拥有id属性，则它们需要是唯一的。下面是递增id，name和placeholderhttp://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); 
}

来源

2016-01-19 19:50:45 Ionut

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

回答

相关问题