jQuery動態填充表格字段與表格數據

Question

我已經創建了一個表格模式與表格。當你點擊一個表格行時，它會在父頁面上填充一個表單。這很好，但當我點擊另一個表格行時，我無法獲取值的變化。因爲我使用的是ID，所以它只取第一個表格行的值。我很樂於改變班級，但我嘗試過，並沒有幫助。

請任何人都可以幫助我。代碼如下。

模式窗體與表

<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

ID必須是唯一的，所以這是行不通的：

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

我會給每個行的ID，並且擁有所有的列使用相同的類：

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