按下编辑按钮时填写输入字段

Question

我正在寻找一种通过 jQuery/Javascript 的方法来用我从表中获取的数据填充一些输入字段。我的表格如下所示：

<tr>
        <th>ticketID</th>
            <th>eventID</th>
            <th>name</th>
            <th>price</th>
            <th>priceWithinAllocation</th>
          <th>&nbsp;</th>
</tr>
<tr >
      <td class="ticketID">1</td>
      <td class="eventID">1</td>
      <td class="name">Sun</td>
      <td class="price">300</td>
      td class="priceWithinAllocation">150</td>
      <td align="center"><input type="button" class="editRow" value="EDIT"/></td>
</tr>
<tr >
      <td class="ticketID">2</td>
      <td class="eventID">1</td>
      <td class="name">Mon</td>
      <td class="price">300</td>
      <td class="priceWithinAllocation">150</td>
        <td align="center"><input type="button" class="editRow" value="EDIT"/></td>
</tr>

我还有一个表格，我希望值出现在其中。但是，并非所有值都应该出现在那里。

<p>
<label for="">Name:</label>
<input type="text" name="name" />   

</p>
<p>
<label for="">Price:</label>
<input type="text" name="price" />  

</p>
<p>
<label for="">PriceWithinAllocation:</label>
<input type="text" name="priceWithinAllocation" />  

因此，假设我单击第一行的“编辑”按钮，我希望 name、price 和 pricewithinallocation 显示在我的输入字段中。但是，我认为没有办法做到这一点。我尝试了一些 jquery DOM 遍历，但效果并不理想。有人在这里看到任何解决方案吗？这可能吗？

</p>
<p>
<input type="submit" id="saveNew" value="SAVE" />
<input type="button" id="cancelNew" value="CANCEL" />                                

Answer 1

试试这个：

$(function(){
    $(".editRow").click(function(){
        var name = $(this).parent().siblings(".name").text();
        var price = $(this).parent().siblings(".price").text();
        var priceWithinAllocation = $(this).parent().siblings(".priceWithinAllocation").text();
        $("[name='name']").val(name);
        $("[name='price']").val(price);
        $("[name='priceWithinAllocation']").val(priceWithinAllocation);
    });
});

工作示例： http://jsfiddle.net/2QVQ6/

替代方案：

$(function(){
    $(".editRow").click(function(){
        $("[name='name']").val($(this).parent().siblings(".name").text());
        $("[name='price']").val($(this).parent().siblings(".price").text());
        $("[name='priceWithinAllocation']").val($(this).parent().siblings(".priceWithinAllocation").text());
    });
})

Answer 2

当然有可能。

$('.editRow').click(function(){
  var $row = $(this).closest('tr');
  $('input[name="name"]').val($('.name',$row).text());
  $('input[name="price"]').val($('.price',$row).text());
  $('input[name="priceWithinAllocation"]').val($('.priceWithinAllocation',$row).text());
})

实例：http://jsfiddle.net/4tWjh/