獲取當前表行的輸入字段值，並將其附加到另一個元素

Question

我在每個表行中都有一個<input>字段以及一個<button> 。 該表是使用JSON文件中的數據動態創建的，但是我認為這並不重要。

問題是我希望能夠單擊按鈕並將特定的<td>附加到另一個HTML元素。

基本上，應該獲取表中第一個<td>的內容，並將其與我的輸入字段的值一起附加。 使用上述代碼有效，但是，始終僅正確附加表的第一個<td> ，而其他所有輸入字段的值將保持不變。

我不知道該怎么說，所以這是一個片段：

 $("#medi-table").delegate(".btn-add-med", "click", function(){ var $this = $(this), myCol = $this.closest("td"), myRow = myCol.closest("tr"), targetArea = $("#contentHere"), $note = $(".note"); targetArea.append(myRow.children().not(myCol).text() + '<br />' + $note.val() + '<br />'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="medi-table"> <table class="table table-hover"> <thead> <tr> <th>Medikament</th> <th>Notes</th> <th>Add</th> </tr> </thead> <tbody id="Medikamentenliste"> <tr> <td>Item 1</td> <td> <input type="text" class="note"></input> </td> <td> <button class="btn btn-default btn-block btn-add-med">Add</button> </td> </tr> <tr> <td>Item 2</td> <td> <input type="text" class="note"></input> </td> <td> <button class="btn btn-default btn-block btn-add-med">Add</button> </td> </tr> <tr> <td>Item 3</td> <td> <input type="text" class="note"></input> </td> <td> <button class="btn btn-default btn-block btn-add-med">Add</button> </td> </tr> </tbody> </table> </div><!--end medi-table--> <div id="contentHere"></div> 

問題在於，它僅從第一行的第一個輸入框接受輸入，我希望它們全部都是單獨的。

Answer 1

您將從帶有class note的第一項中獲取輸入值。 您必須從存儲在myRow的當前行中選擇此元素

為此，您可以使用jQuery的find方法：

var currentNote = myRow.find(".note");

查看更新的代碼：

  $("#medi-table").delegate(".btn-add-med", "click", function(){ var $this = $(this), myCol = $this.closest("td"), myRow = myCol.closest("tr"), targetArea = $("#contentHere"), $note = myRow.find(".note"); targetArea.append(myRow.children().not(myCol).text() + '<br />' + $note.val() + '<br />'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="medi-table"> <table class="table table-hover"> <thead> <tr> <th>Medikament</th> <th>Notes</th> <th>Add</th> </tr> </thead> <tbody id="Medikamentenliste"> <tr><td>Item 1</td><td><input type="text" class="note"></input></td><td><button class="btn btn-default btn-block btn-add-med">Add</button></td></tr> <tr><td>Item 2</td><td><input type="text" class="note"></input></td><td><button class="btn btn-default btn-block btn-add-med">Add</button></td></tr> <tr><td>Item 3</td><td><input type="text" class="note"></input></td><td><button class="btn btn-default btn-block btn-add-med">Add</button></td></tr> </tbody> </table> </div><!--end medi-table--> <div id="contentHere"> </div> 

Answer 2

您需要修改邏輯，以使用DOM遍歷來查找與單擊的按鈕相關的input ，就像使用它來獲取td的文本一樣。 嘗試這個：

 var $targetArea = $("#contentHere"); $("#medi-table").on('click', ".btn-add-med", function() { var $this = $(this), $row = $this.closest('tr'), value = $row.find('input').val(), text = $row.find('td:first').text(); $targetArea.append(text + '<br />' + value + '<br />'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="medi-table"> <table class="table table-hover"> <thead> <tr> <th>Medikament</th> <th>Notes</th> <th>Add</th> </tr> </thead> <tbody id="Medikamentenliste"> <tr> <td>Item 1</td> <td> <input type="text" class="note" /> </td> <td> <button class="btn btn-default btn-block btn-add-med">Add</button> </td> </tr> <tr> <td>Item 2</td> <td> <input type="text" class="note" /> </td> <td> <button class="btn btn-default btn-block btn-add-med">Add</button> </td> </tr> <tr> <td>Item 3</td> <td> <input type="text" class="note" /> </td> <td> <button class="btn btn-default btn-block btn-add-med">Add</button> </td> </tr> </tbody> </table> </div> <!--end medi-table--> <div id="contentHere"> </div> 

還要注意， input元素沒有結束</input>標記。