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

Question

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

问题是我希望能够单击按钮并将特定的<td>s 附加到另一个 HTML 元素。

基本上，它应该获取表中第一个<td> 的内容并将其与我的输入字段的值 一起附加。使用上面的代码是可行的，但是，只有表的第一个 <td> 始终被正确附加，而输入字段值对于其他所有内容都将保持不变。

我不知道该怎么说，所以这里是一个sn-p：

$("#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>

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> 标记。