jQuery динамическое заполнение полей формы данными таблицы

Question

Я создал форму в модальном поле с таблицей. Когда вы нажимаете на строку таблицы, она заполняет форму на родительской странице. Это прекрасно работает, но я не могу изменить значения, когда нажимаю на другую строку таблицы. Поскольку я использую идентификаторы, он берет только значения из первой строки таблицы. Я открыт для перехода на занятия, но я попробовал это, и это не помогло.

Пожалуйста, кто-нибудь может мне помочь с этим. Код ниже.

Модальная форма с таблицей

<div id="modal_form" title="Address Search">
<form id="modal_form">
<ul>
    <li><label for="name">Search by street description</label>
        <input type="text" name="street_description" id="street_description" />
        <input type="button" id="search_button" class="form_button" value="Search"></li>
</ul>
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="table-data">
              <tbody><tr>
                <td width="200px"><a href="#">Street</a></td>
                <td width="200px"><a href="#">Suburb</a></td>
                <td width="200px"><a href="#">City</a></td>
              </tr>
              <tr>
                <td id="address_street">Harambee Road</td>
                <td id="address_suburb">Onerai </td>
                <td id="address_city">Onerai Rural</td>
              </tr>
              <tr>
                <td id="address_street">Hutchinson Road</td>
                <td id="address_suburb">Onerai </td>
                <td id="address_city">Onerai Rural</td>
              </tr>
              <tr>
                <td id="address_street">Kauri Road</td>
                <td id="address_suburb">Onerai </td>
                <td id="address_city">Onerai Rural</td>
              </tr>
        </tbody></table><!-- /table#table-data -->
</form>

Javascript (Здесь я должен различать строки таблицы)

<script type="text/javascript">
$(document).ready(function() {
$('#table-data tr').click(function () {
$('#street_name').val( $('#address_street').text() )
$('#suburb').val( $('#address_suburb').text() )
$('#city').val( $('#address_city').text() )})
});
</script>

Родительская форма, где заполняются поля формы

<form id="profile">
<ul>
<li><label for="street_number">Street Number</label><input id="street_number" type="text" placeholder="Street Number" name="street_number" ><input type="button" class="form_button" id="find_address" value="Find Address"></li>
<li><label for="street_name">Street Name</label><input id="street_name" type="text" placeholder="Street Name" name="street_name"  disabled="disabled" ></li>
<li><label for="suburb">Suburb</label><input id="suburb" type="text" placeholder="Suburb" name="suburb"  disabled="disabled" ></li>
<li><label for="city">City</label><input id="city" type="text" placeholder="City" name="city" disabled="disabled" ></li>
<li><input type="submit" id="submit" value="Save"></li>
</ul>
</form>

Спасибо за любую помощь, вы можете дать, ура

Answer 1

идентификаторы должны быть уникальными, так что это не сработает:

<td id="address_street">Harambee Road</td>
...
<td id="address_street">Hutchinson Road</td>

Я бы дал каждой из строк идентификатор, и все столбцы использовали бы одинаковые class :

<tr id="row1">
  <td class="address_street">Harambee Road</td>
  <td class="address_suburb">Onerai </td>
  <td class="address_city">Onerai Rural</td>
</tr>
<tr id="row2">
  <td class="address_street">Hutchinson Road</td>
  <td class="address_suburb">Onerai </td>
  <td class="address_city">Onerai Rural</td>
</tr>
<tr id="row3">
  <td class="address_street">Kauri Road</td>
  <td class="address_suburb">Onerai </td>
  <td class="address_city">Onerai Rural</td>
</tr>

Ваш JavaScript изменится так:

<script type="text/javascript">
  $(document).ready(function() {
    $('#table-data tr').click(function () {
      var curRowId = $(this).attr("id");
      $('#street_name').val( $('#' + curRowId + ' td.address_street').text() );
      $('#suburb').val( $('#' + curRowId + ' td.address_suburb').text() );
      $('#city').val( $('#' + curRowId + ' td.address_city').text() );
    });
  });
</script>