从Jquery中的按钮传递变量

我在带有表格的模式框中创建了一个表单。单击表格行时，它将填充父页面上的邮政地址表单。一切都进行得很顺利（在StackOverflow的帮助下），但后来我接到了为街道地址添加第二个按钮的任务

我添加了第二个按钮并将其链接到同一个表单，现在我需要一种方法来传递变量，以便第一个按钮只写入我指定的表单字段，第二个按钮也是如此

任何帮助都将不胜感激

代码-JS Fiddle示例-

我已经在带有表格的模式框中创建了一个表单。单击表格行时，它会填充父页面上的表单

带表格的模式框

<div id="modal_form" title="Address Search">
<form id="address_search">
<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 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">Mt Wellington</td>
                <td class="address_city">Auckland City</td>
              </tr>
              <tr id="row3">
                <td class="address_street">Kauri Road</td>
                <td class="address_suburb">Westfordshire</td>
                <td class="address_city">Palmerston North</td>
              </tr>
        </tbody></table><!-- /table#table-data -->
    </form>
</div><!-- /div#modal_form -->

<script type="text/javascript">
$(document).ready(function() {
$('#find_address').click(function(){
$('#modal_form').dialog('open');
$('table#table-data_postal').attr( 'id', 'table-data' );
$('td.address_street_postal').removeClass("address_street_postal").addClass("address_street");
$('td.address_suburb_postal').removeClass("address_suburb_postal").addClass("address_suburb");
$('td.address_city_postal').removeClass("address_city_postal").addClass("address_city");
$('td.address_code_postal').removeClass("address_city_postal").addClass("address_code");
$('label#suburb_search').css('display','none');
$('label#street_search').css('display','inline');
$('input#street_description').css('width','330px');
}); //end click handler
$('#find_address_postal').click(function(){
$('#modal_form').dialog('open');
$('table#table-data').attr( 'id', 'table-data_postal' );
$('td.address_street').removeClass("address_street").addClass("address_street_postal");
$('td.address_suburb').removeClass("address_suburb").addClass("address_suburb_postal");
$('td.address_city').removeClass("address_city").addClass("address_city_postal");
$('td.address_code').removeClass("address_code").addClass("address_code_postal");
$('label#suburb_search').css('display','none');
$('label#street_search').css('display','inline');
$('input#street_description').css('width','330px');
}); //end click handler
}); //end ready event
</script>

按街道描述搜索


哈兰贝路
奥内莱
奥内莱乡村酒店
和记臣道
威灵顿山
奥克兰市
Kauri路
韦斯特福德郡
北帕默斯顿

Javascript

<!-- TO OPEN THE MODAL BOX -->
<script type="text/javascript">
$(document).ready(function() {
$('#find_address').click(function(){
$('#modal_form').dialog('open');
}); //end click handler
$('#find_address1').click(function(){
$('#modal_form').dialog('open');
}); //end click handler
}); //end ready event
</script>

<!-- FOR FIRST BUTTON -->
 <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() );
  $("#modal_form").dialog('close');
    });
  });
</script>

<!-- FOR SECOND BUTTON -->
<script type="text/javascript">
  $(document).ready(function() {
    $('#table-data tr').click(function () {
      var curRowId = $(this).attr("id");
      $('#street_name1').val( $('#' + curRowId + ' td.address_street').text() );
      $('#suburb1').val( $('#' + curRowId + ' td.address_suburb').text() );
      $('#city1').val( $('#' + curRowId + ' td.address_city').text() );
  $("#modal_form1").dialog('close');
    });
  });
</script>

$（文档）.ready（函数（）{
$（“#查找地址”）。单击（函数（）{
$（'模态形式'）。对话框（'打开'）；
})；//结束单击处理程序
$（“#查找地址1”）。单击（函数（）{
$（'模态形式'）。对话框（'打开'）；
})；//结束单击处理程序
}); //结束准备活动
$（文档）.ready（函数（）{
$（'#表数据tr'）。单击（函数（）{
var curRowId=$（this.attr（“id”）；
$（'#street_name'）.val（$（'#'+curRowId+'td.address_street'）.text（））；
$（“#郊区”）.val（$（“#”+curRowId+“td.address_郊区”）.text（））；
$（'#city'）.val（$（'#'+curRowId+'td.address_city'）.text（））；
$（“#模态形式”）。对话框（'close'）；
});
});
$（文档）.ready（函数（）{
$（'#表数据tr'）。单击（函数（）{
var curRowId=$（this.attr（“id”）；
$（'#街道名称1'）.val（$（'#'+curRowId+'td.address_street'）.text（））；
$（'#suburb1'）.val（$（'#'+curRowId+'td.address_suburb1'）.text（））；
$（'#city1'）.val（$（'#'+curRowId+'td.address_city'）.text（））；
$（“#模态形式1”）。对话框（'close'）；
});
});

填充字段的表单

 <form id="profile">
 <ul>
<!-- FIRST BUTTON SECTION -->
 <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>

<!-- SECOND BUTTON SECTION -->
 <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_address1" value="Find Address"></li>
 <li><label for="street_name1">Street Name</label><input id="street_name1" type="text" placeholder="Street Name" name="street_name1"  disabled="disabled" ></li>
 <li><label for="suburb1">Suburb</label><input id="suburb1" type="text" placeholder="Suburb" name="suburb1"  disabled="disabled" ></li>
 <li><label for="city1">City</label><input id="city1" type="text" placeholder="City" name="city1" disabled="disabled" ></li>

 <li><input type="submit" id="submit" value="Save"></li>
 </ul>
 </form>

街道号码
街道名称
郊区
城市
街道号码
街道名称
郊区
城市

您应该在每行上都有第二个按钮，这样您就可以知道您正在单击第二个按钮，然后您可以相应地采取所需的操作。现在，您要做的是在每个

tr

元素上附加一个click处理程序。假设您有第二个按钮class

secondButton

，您可以尝试下面的代码

 //This code will attach a click event handler to the second button on each row
 $('#table-data tr .secondButton').click(function () {
      var curRowId = $(this).closest('tr').attr("id");
      $('#street_name1').val( $('#' + curRowId + ' td.address_street').text() );
      $('#suburb1').val( $('#' + curRowId + ' td.address_suburb').text() );
      $('#city1').val( $('#' + curRowId + ' td.address_city').text() );
  $("#modal_form1").dialog('close');
    }); 

---

我通过点击按钮更改td的类来解决这个问题，我还必须更改表的类。我使用的代码如下

代码

<div id="modal_form" title="Address Search">
<form id="address_search">
<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 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">Mt Wellington</td>
                <td class="address_city">Auckland City</td>
              </tr>
              <tr id="row3">
                <td class="address_street">Kauri Road</td>
                <td class="address_suburb">Westfordshire</td>
                <td class="address_city">Palmerston North</td>
              </tr>
        </tbody></table><!-- /table#table-data -->
    </form>
</div><!-- /div#modal_form -->

<script type="text/javascript">
$(document).ready(function() {
$('#find_address').click(function(){
$('#modal_form').dialog('open');
$('table#table-data_postal').attr( 'id', 'table-data' );
$('td.address_street_postal').removeClass("address_street_postal").addClass("address_street");
$('td.address_suburb_postal').removeClass("address_suburb_postal").addClass("address_suburb");
$('td.address_city_postal').removeClass("address_city_postal").addClass("address_city");
$('td.address_code_postal').removeClass("address_city_postal").addClass("address_code");
$('label#suburb_search').css('display','none');
$('label#street_search').css('display','inline');
$('input#street_description').css('width','330px');
}); //end click handler
$('#find_address_postal').click(function(){
$('#modal_form').dialog('open');
$('table#table-data').attr( 'id', 'table-data_postal' );
$('td.address_street').removeClass("address_street").addClass("address_street_postal");
$('td.address_suburb').removeClass("address_suburb").addClass("address_suburb_postal");
$('td.address_city').removeClass("address_city").addClass("address_city_postal");
$('td.address_code').removeClass("address_code").addClass("address_code_postal");
$('label#suburb_search').css('display','none');
$('label#street_search').css('display','inline');
$('input#street_description').css('width','330px');
}); //end click handler
}); //end ready event
</script>

$（文档）.ready（函数（）{
$（“#查找地址”）。单击（函数（）{
$（'模态形式'）。对话框（'打开'）；
$（'table#table-data_postal'）.attr（'id'，'table-data'）；
$（'td.address\u street\u postal'）.removeClass（“address\u street\u postal”）.addClass（“address\u street”）；
$（'td.address\u郊区邮政'）.removeClass（“address\u郊区邮政”）.addClass（“address\u郊区”）；
$（'td.address\u city\u postal'）.removeClass（“address\u city\u postal”）.addClass（“address\u city”）；
$（'td.address\U code\U postal'）.removeClass（“address\U city\U postal”）.addClass（“address\U code”）；
$（'label#u search'）.css（'display'，'none'）；
$（'label#street_search'）.css（'display'，'inline'）；
$（'input#street_description'）.css（'width'，'330px'）；
})；//结束单击处理程序
$（“#查找_地址_邮政”）。单击（函数（）{
$（'模态形式'）。对话框（'打开'）；
$（'table#table data'）.attr（'id'，'table-data_-postal'）；
$（'td.address\u street'）。删除类（“address\u street”）。添加类（“address\u street\u postal”）；
$（'td.address\u郊区'）.removeClass（“address\u郊区”）.addClass（“address\u郊区邮政”）；
$（'td.address\u city'）.removeClass（“address\u city”）.addClass（“address\u city\u postal”）；
$（'td.address\u code'）.removeClass（“address\u code”）.addClass（“address\u code\u postal”）；
$（'label#u search'）.css（'display'，'none'）；
$（'label#street_search'）.css（'display'，'inline'）；
$（'input#street_description'）.css（'width'，'330px'）；
})；//结束单击处理程序
}); //结束准备活动

Hi Shankar，谢谢，但遗憾的是，在表格行中添加按钮不是一个选项。我需要它从点击按钮激活，有没有想过通过点击按钮传递一个变量，让它知道应该在哪里写入数据？干杯在这种情况下，您无法区分在同一行上的两次单击。嗨，如果我感到痛苦，很抱歉，但我要做的是打开带有按钮1的模式框，并仅更新表单1中的字段，此模式将在单击时关闭。但如果我单击按钮2，我想打开相同的模式，但仅更新表单2中的字段。如果这不可能，请让我知道，谢谢你的努力，干杯。你的意思是每行都有这两个按钮？嗨，没有。按钮在填充字段的父窗体上。我有一个按钮显示街道地址，另一个按钮显示邮政地址。当我点击按钮时，它会打开一个模态对话框，里面有表格。单击表行时，它会更改父窗体中文本字段的值。谢谢