自动填写输入表格阵列

Question

以下会自动代码填写基于在从另一个输入端2输入表格..现在它的工作，但仅用于第一loop..its不工作的第二和第三环

..我知道我们必须使用像数组，但林不知道如何做到这一点..

<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是唯一.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>"; 
} 

Answer 2

首先，id必须是唯一的，并其次实现这个使用类而不是ID，如果你想使用这些输入然后在服务器端做出一组输入字段，如

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

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