使用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添加一個具有輸入字段的錶行

回答

相關問題