javascript - 如何让 onkeyup 在下一行工作？

Question

案例:我创建了一个表单输入，其中显示了每个类(class)的所有学生并一一输入他们的值(value)观。我成功创建了 onkeyup 来计算 (N.Akhir) 以获得期望值。但这只适用于第一行，它不适用于下一行。 如何让 onkeyup 在下一行起作用？

我正在使用 codeigniter 和 javascript 来制作这个

请看下面我的代码:

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> 						
  <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>  
		<td><?php echo $i; ?></td> 
		<td><?php echo $row->nama; ?></td>
		<td><input type="text" class="form-control" id="jml_hadir" maxlength="1" name="jml_hadir" placeholder="Hadir" /><?php echo form_error('jml_hadir');  ?></td>
		<td><input type="text" class="form-control" id="tt1" placeholder="TT1" maxlength="5" name="tt1" onkeyup="hitung2()" /><?php echo form_error('tt1');  ?></td>
		<td><input type="text" class="form-control" id="tt2" placeholder="TT1" maxlength="5" name="tt2" onkeyup="hitung2()" /><?php echo form_error('tt2');  ?></td>
		<td><input type="text" class="form-control" id="tt3" placeholder="TT1" maxlength="5" name="tt3" onkeyup="hitung2()" /><?php echo form_error('tt3');  ?></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()"/><?php echo form_error('np');  ?></td>
		<td><input type="text" class="form-control" id="na" name="na" readonly /></td>
	</tr>  
<?php $i++;}}?> 
</form>
</table>

Answer 1

首先，不要为多个dom元素分配相同的id。与“ID”的含义矛盾，还是用class吧。

其次，将对象本身作为参数传递，以便您可以检测函数中的整行。

因此您的整个代码可以更新如下:

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>