Заполнение полей ввода при нажатии кнопки редактирования

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/