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

所以，说我点击第一行的EDIT按钮，我希望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/

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

2 个答案: