Question

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

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

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

我不知道怎么说它所以这是一个片段：

＆＃13;

$("#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 />');
    });

＆＃13;

<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>

＆＃13;

问题是它只从第一行的第一个输入框中获取输入，我希望它们都是个体的。

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的文本相同。试试这个：

＆＃13;

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

＆＃13;

<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>

＆＃13;

另请注意，input元素没有结束</input>标记。

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

2 个答案: