Question

下面的代码将自动填充来自另一个输入的2个输入表单..现在它的工作但仅适用于第一个循环..不能在第二个和第三个循环上工作

..我知道我们必须使用像数组这样的东西，但我不知道该怎么做..

 <script>
   $(document).ready(function() {
    $('#totalofservices').keyup(function(){
       $("#totalontarget").val($(this).val());
    $("#totalofftarget").val("0");
 });
});
 </script>

 for($x=1; $x<=3; ++$x)
{
    echo "<tr>
      <td>Zone $x</td>
      <td><input style='text-align:center' class='form-control' type='text' size='20' id='totalofservices' name='totalofservices'>
      </td>
      <td><input style='text-align:center' class='form-control' type='text' size='20' id='totalontarget' name='totalontarget'></td>
      <td><input style='text-align:center' class='form-control' type='text' size='20' id='totalofftarget' name='totalofftarget'></td>


    </tr>";
}

Answer 1

首先，id必须是唯一的并且要实现此使用类而不是id其次，如果要在服务器端使用这些输入，则创建输入字段数组，如

＆＃13;

$(document).ready(function() {
  $('.totalofservices').keyup(function() {
    var tr = $(this).closest('tr');
    tr.find(".totalontarget").val($(this).val());
    tr.find(".totalofftarget").val("0");
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>Zone 1</td>
    <td><input style='text-align:center' class='form-control totalofservices' type='text' size='20'  name='totalofservices[]'>
    </td>
    <td><input style='text-align:center' class='totalontarget form-control' type='text' size='20'  name='totalontarget[]'></td>
    <td><input style='text-align:center' class='totalofftarget form-control' type='text' size='20'  name='totalofftarget[]'></td>
  </tr>
  <tr>
    <td>Zone 2</td>
    <td><input style='text-align:center' class='totalofservices form-control' type='text' size='20' name='totalofservices[]'>
    </td>
    <td><input style='text-align:center' class='totalontarget form-control' type='text' size='20' name='totalontarget[]'></td>
    <td><input style='text-align:center' class='totalofftarget form-control' type='text' size='20' name='totalofftarget[]'></td>
  </tr>
  <tr>
    <td>Zone 3</td>
    <td><input style='text-align:center' class='totalofservices form-control' type='text' size='20' name='totalofservices[]'>
    </td>
    <td><input style='text-align:center' class='totalontarget form-control' type='text' size='20' name='totalontarget[]'></td>
    <td><input style='text-align:center' class='totalofftarget form-control' type='text' size='20'  name='totalofftarget[]'></td>
  </tr>
</table>

＆＃13;

Answer 2

不需要数组。请尝试使用类名而不是id。因为整个文档ID是唯一的.Closest()，它会将tr .find()用于查找子项

<script>
   $(document).ready(function() {
    $('.totalofservices').keyup(function(){
       $(this).closest('tr').find(".totalontarget").val($(this).val());
    $(this).closest('tr').find(".totalofftarget").val("0");
 });
});
 </script>

 for($x=1; $x<=3; ++$x)
{
    echo "<tr>
      <td>Zone $x</td>
      <td><input style='text-align:center' class='form-control totalofservices' type='text' size='20' id='totalofservices' name='totalofservices'>
      </td>
      <td><input style='text-align:center' class='form-control totalontarget' type='text' size='20' id='totalontarget' name='totalontarget'></td>
      <td><input style='text-align:center' class='form-control totalofftarget' type='text' size='20' id='totalofftarget' name='totalofftarget'></td>


    </tr>";
}

自动填充输入表单数组

2 个答案: