自動入力フォームアレイ

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

ありませんが、それは子供たちを見つけるために、TR .find()使用を対象とします全体のドキュメントID .becauseクラス名を持つ配列.Try代わりのidを.Closest()ユニークされる必要がある

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