Wie funktioniert onkeyup in der nächsten Zeile?

Question

Fall: Ich habe eine Formulareingabe erstellt, in der alle Schüler angezeigt werden, die pro Klasse teilnehmen und die Werte einzeln eingeben. Ich erstelle erfolgreich onkeyup, um (N.Akhir) zu berechnen, um Wunschwerte zu erhalten. Aber das funktioniert nur in der ersten Reihe, es funktionierte nicht in der nächsten Reihe. Wie funktioniert onkeyup in der nächsten Zeile?

I codeigniter und Javascript bin mit dieser meine Codes

Bitte siehe unten machen:

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

Erstens, zuweisen Sie nicht die gleiche ID für mehrere dom-Elemente. Es ist widersprüchlich die Bedeutung von "ID", eher Gebrauchsklasse.

Zweitens übergeben Sie das Objekt selbst als Parameter, so dass Sie die ganze Zeile in der Funktion erkennen können.

So Ihren ganzen Code könnte wie folgt aktualisiert werden:

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

sorry ich kommentieren kann nicht mehr als 50 benötigen Ruf, stellen Sie sicher, dass Ihre ID ist nicht dasselbe wie id kann nicht gleich sein, wenn die erste Zeile id = tt1 die zweite Zeilen-ID kann nicht wieder tt1 sein javascript nimmt nur die erste Zeile id = tt1

Sie id = "tt <?=$i ?>" und onkeyup = "hitung2 (<?=$i?>)"

Answer 3

Pass this wie passieren kann:

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

Dann in der Funktion:

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>