다음 행에서 onkeyup을 만드는 방법은 무엇입니까?

Question

사례 : 클래스별로 하나씩 값을 입력하는 모든 학생을 표시하는 입력 양식을 만들었습니다. 나는 성공적으로 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"의 의미와 상반되는 것이지 오히려 클래스를 사용합니다.

둘째, 함수에서 전체 행을 감지 할 수 있도록 개체 자체를 param으로 전달하십시오.

그래서 전체 코드는 다음과 같이 업데이트 할 수 있습니다 :

당신이 당신의 행을 분리하는 고유 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의 및 자바 스크립트를 사용하고

첫 번째 행 id = tt1 인 경우 id가 같을 수 없습니다. 두 번째 행 ID는 tt1 일 수 없습니다. 첫 번째 행만 id = tt1이됩니다.

(210)

당신이 ID를 전달할 수 있습니다 = "TT <?=$i ?>"및 onKeyUp에 = "hitung2 (<?=$i?>)"

function hitung2(i) { $('#tt'+i).val()}

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>