jQuery动态填充表格数据的表单字段 [英] jQuery dynamic fill in form fields with table data
问题描述
我使用表格在模态框中创建了一个表单。当你点击一个表格行时,它会在父页面上填充一个表单。这很好,但当我点击另一个表格行时,我无法获取值的变化。因为我使用的是ID,所以它只取第一个表格行的值。我愿意改变班级,但我尝试过,并没有帮助。
请任何人都可以帮助我。
带表格的模态表格
< div id =modal_formtitle =地址搜索>
< form id =modal_form>
< ul>
< li>< label for =name>按照街道描述搜索< / label>
< input type =textname =street_descriptionid =street_description/>
< input type =buttonid =search_buttonclass =form_buttonvalue =Search>< / li>
< / ul>
< table width =100%border =0cellspacing =0cellpadding =0id =table-data>
< tbody>< tr>
< td width =200px>< a href =#>街< / a>< / td>
< td width =200px>< a href =#>郊区< / a>< / td>
< td width =200px>< a href =#>城市< / 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_numbertype =textplaceholder =Street Numbername =street_number> < input type =buttonclass =form_buttonid =find_addressvalue =Find Address>< / li>
< li>< label for =street_name>街道名称< / label>< input id =street_nametype =textplaceholder =Street Namename =street_name 已禁用>< / li>
< li>< label for =suburb>郊区< / label>< input id =suburbtype =textplaceholder =Suburbname =suburbdisabled =disabled >< / li>
< li>< label for =city>城市< / label>< input id =citytype =textplaceholder =Cityname =citydisabled =disabled >< / li>
< li>< input type =submitid =submitvalue =Save>< / li>
< / ul>
< / form>
感谢您给予的任何帮助,欢呼声
ID必须是唯一的,所以这不会起作用:
< td id =address_street> Harambee Road< / td>
...
< td id =address_street> Hutchinson Road< / td>
我会给每个行一个ID,这些列使用相同的 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>
I have created a form in a modal box with a table. When you click on a table row it populates a form on the parent page. This is working great but I can't get the values to change when I click on another table row. Because I'm using IDs it only takes the values from the first table row. I am open to changing to classes but I tried this and it didn't help.
Please can anyone help me with this. The code is below.
Modal Form with Table
<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 (This is where I need to differentiate between the table rows)
<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>
Parent Form, where the form fields are populated
<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>
Thanks for any help you can give, cheers
IDs must be unique, so this is not going to work:
<td id="address_street">Harambee Road</td>
...
<td id="address_street">Hutchinson Road</td>
I would give each of the rows an ID, and have all of the columns use the same 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>
Your JavaScript would change to be like this:
<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>
这篇关于jQuery动态填充表格数据的表单字段的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!