次の行でonkeyupを動作させる方法は？

Question

ケース： クラスごとに値を入力するすべての生徒を1つずつ表示するフォーム入力を作成しました。私は正常にonkeyupを作成して（N.Akhir）欲求値を得るために計算します。しかし、これは最初の行でのみ動作し、次の行では機能しませんでした。 次の行でonkeyupを動作させるにはどうすればよいですか？

function hitung2() { 
 
    var a = $("#tt1").val(); 
 
    var b = $("#tt2").val(); 
 
    var c = $("#tt3").val(); 
 
    ntt = (parseInt(a) + parseInt(b) + parseInt(c)) /3; 
 
    ntt = ntt.toFixed(2); 
 
    $("#ntt").val(ntt); 
 
    var d = $("#ntt").val(); 
 
    var e = $("#np").val(); 
 
    f = (parseInt(e)*3 + parseInt(d)*7) /10 
 
    $("#na").val(f);   
 
}

<table class="table table-hover"> 
 
<tr> 
 
    <th>No</th> \t \t \t \t \t \t 
 
    <th>NAMA</th> \t \t \t 
 
    <th>TOTAL HADIR</th> 
 
    <th>TT 1</th> 
 
    <th>TT 2</th> 
 
    <th>TT 3</th> 
 
    <th>N.RATA"</th> 
 
    <th>N.PARTISIPASI</th> 
 
    <th>N.AKHIR</th> 
 
</tr> 
 
<?php 
 
    if(isset($ambil_data)>0){$i=1; foreach($ambil_data as $row) { 
 
\t \t ?> 
 
\t <tr> 
 
\t \t <td><?php echo $i; ?></td> 
 
\t \t <td><?php echo $row->nama; ?></td> 
 
\t \t <td><input type="text" class="form-control" id="jml_hadir" maxlength="1" name="jml_hadir" placeholder="Hadir" /><?php echo form_error('jml_hadir'); ?></td> 
 
\t \t <td><input type="text" class="form-control" id="tt1" placeholder="TT1" maxlength="5" name="tt1" onkeyup="hitung2()" /><?php echo form_error('tt1'); ?></td> 
 
\t \t <td><input type="text" class="form-control" id="tt2" placeholder="TT1" maxlength="5" name="tt2" onkeyup="hitung2()" /><?php echo form_error('tt2'); ?></td> 
 
\t \t <td><input type="text" class="form-control" id="tt3" placeholder="TT1" maxlength="5" name="tt3" onkeyup="hitung2()" /><?php echo form_error('tt3'); ?></td> 
 
\t \t <td><input type="text" class="form-control" id="ntt" name="ntt" readonly /></td> 
 
\t \t <td><input type="text" class="form-control" id="np" placeholder="N.Partisipasi" name="np" onkeyup="hitung2()"/><?php echo form_error('np'); ?></td> 
 
\t \t <td><input type="text" class="form-control" id="na" name="na" readonly /></td> 
 
\t </tr> 
 
<?php $i++;}}?> 
 
</form> 
 
</table>

Answer 1

まず、複数のdom要素に同じidを割り当てないでください。それは "ID"の意味と矛盾し、むしろクラスを使用する。

第2に、関数内の行全体を検出できるように、オブジェクト自体をパラメータとして渡します。

だから、あなたの全体のコードは次のように更新することができます

あなたの行を分離するための一意のID値または使用のクラスを持っている必要があるためです

function hitung2(obj) { 
    var $row = $(obj).closest('.row'); 
    var a = $row.find(".tt1").val(); 
    var b = $row.find(".tt2").val(); 
    var c = $row.find(".tt3").val(); 

    ntt = (parseInt(a) + parseInt(b) + parseInt(c)) /3; 
    ntt = ntt.toFixed(2); 

    $row.find(".ntt").val(ntt); 
    var d = $row.find(".ntt").val(); 
    var e = $row.find(".np").val(); 
    f = (parseInt(e)*3 + parseInt(d)*7) /10 
    $row.find(".na").val(f);   
} 


<table class="table table-hover"> 
    <tr> 
     <th>No</th>       
     <th>NAMA</th>   
     <th>TOTAL HADIR</th> 
     <th>TT 1</th> 
     <th>TT 2</th> 
     <th>TT 3</th> 
     <th>N.RATA"</th> 
     <th>N.PARTISIPASI</th> 
     <th>N.AKHIR</th> 
    </tr> 
    <?php 
     if(isset($ambil_data)>0){$i=1; foreach($ambil_data as $row) { 
       ?> 
      <tr class="row"> 
       <td><?php echo $i; ?></td> 
       <td><?php echo $row->nama; ?></td> 
       <td><input type="text" class="form-control jml_hadir" id="jml_hadir_<?php echo $i; ?>" maxlength="1" name="jml_hadir" placeholder="Hadir" /><?php echo form_error('jml_hadir'); ?></td> 
       <td><input type="text" class="form-control tt1" id="tt1_<?php echo $i; ?>" placeholder="TT1" maxlength="5" name="tt1" onkeyup="hitung2(this)" /><?php echo form_error('tt1'); ?></td> 
       <td><input type="text" class="form-control tt2" id="tt2_<?php echo $i; ?>" placeholder="TT1" maxlength="5" name="tt2" onkeyup="hitung2(this)" /><?php echo form_error('tt2'); ?></td> 
       <td><input type="text" class="form-control tt3" id="tt3_<?php echo $i; ?>" placeholder="TT1" maxlength="5" name="tt3" onkeyup="hitung2(this)" /><?php echo form_error('tt3'); ?></td> 
       <td><input type="text" class="form-control ntt" id="ntt_<?php echo $i; ?>" name="ntt" readonly /></td> 
       <td><input type="text" class="form-control np" id="np_<?php echo $i; ?>" placeholder="N.Partisipasi" name="np" onkeyup="hitung2(this)"/><?php echo form_error('np'); ?></td> 
       <td><input type="text" class="form-control na" id="na_<?php echo $i; ?>" name="na" readonly /></td> 
      </tr> 
     <?php $i++;}}?> 
     </form> 
    </table> 

Answer 2

申し訳ありません、私はコメントすることはできません50評判を必要とし、あなたのIDがあることを確認してください。私は、これは

の下に私のコードを参照してくださいするためにCodeIgniterのとJavaScriptを使用してい

最初の行ID = tt1の場合はidと同じではない2番目の行IDは再びtt1にはならないjavascriptは最初の行だけをとるid = tt1

はあなたがIDを渡すことができます= "TT <?=$i ?>" とonkeyupの= "hitung2（<?=$i?>）"

Answer 3

パスthisのような：関数内で次に

<input type="text" class="form-control" id="tt3" placeholder="TT1" maxlength="5" name="tt3" onkeyup="hitung2(this)" />

：

function hitung2(thatObj) { 
    ...................   
} 

function hitung2(thatObj) { 
 
    var el = $(thatObj).closest('tr'); 
 
    var a = el.find('input[name=tt1]').val() == "" ? 0: el.find('input[name=tt1]').val(); 
 
    var b = el.find('input[name=tt2]').val() == "" ? 0: el.find('input[name=tt2]').val(); 
 
    var c = el.find('input[name=tt3]').val() == "" ? 0: el.find('input[name=tt3]').val(); 
 

 
    let ntt = (parseInt(a) + parseInt(b) + parseInt(c)) /3; 
 
    ntt = ntt.toFixed(2); 
 

 
    el.find('input[name=ntt]').val(ntt); 
 
    var d = el.find('input[name=ntt]').val() == "" ? 1: el.find('input[name=ntt]').val(); 
 
    var e = el.find('input[name=np]').val() == "" ? 1: el.find('input[name=np]').val(); 
 
    let f = (parseInt(e)*3 + parseInt(d)*7) /10 
 
    el.find('input[name=na]').val(f);   
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<table class="table table-hover"> 
 
    <tr> 
 
    <th>TT 1</th> 
 
    <th>TT 2</th> 
 
    <th>TT 3</th> 
 
    <th>N.RATA</th> 
 
    <th>N.PARTISIPASI</th> 
 
    <th>N.AKHIR</th> 
 
    </tr> 
 
    <tr> 
 
    <td><input type="text" class="form-control" id="tt1" placeholder="TT1" maxlength="5" name="tt1" onkeyup="hitung2(this)" /></td> 
 
    <td><input type="text" class="form-control" id="tt2" placeholder="TT1" maxlength="5" name="tt2" onkeyup="hitung2(this)" /></td> 
 
    <td><input type="text" class="form-control" id="tt3" placeholder="TT1" maxlength="5" name="tt3" onkeyup="hitung2(this)" /></td> 
 
    <td><input type="text" class="form-control" id="ntt" name="ntt" readonly /></td> 
 
    <td><input type="text" class="form-control" id="np" placeholder="N.Partisipasi" name="np" onkeyup="hitung2(this)"/></td> 
 
    <td><input type="text" class="form-control" id="na" name="na" readonly /></td> 
 
    </tr> 
 
    <tr> 
 
    <td><input type="text" class="form-control" id="tt1" placeholder="TT1" maxlength="5" name="tt1" onkeyup="hitung2(this)" /></td> 
 
    <td><input type="text" class="form-control" id="tt2" placeholder="TT1" maxlength="5" name="tt2" onkeyup="hitung2(this)" /></td> 
 
    <td><input type="text" class="form-control" id="tt3" placeholder="TT1" maxlength="5" name="tt3" onkeyup="hitung2(this)" /></td> 
 
    <td><input type="text" class="form-control" id="ntt" name="ntt" readonly /></td> 
 
    <td><input type="text" class="form-control" id="np" placeholder="N.Partisipasi" name="np" onkeyup="hitung2(this)"/></td> 
 
    <td><input type="text" class="form-control" id="na" name="na" readonly /></td> 
 
    </tr> 
 
</table>