javascript - 获取当前表行的输入字段值并将其附加到另一个元素

Question

我有一个 <input>字段以及 <button>在每个表格行中。该表是使用 JSON 文件中的数据动态创建的，但我认为这并不重要。

问题是我希望能够单击按钮并附加特定的 <td> s 到另一个 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

您正在从具有类 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>