動的に作成されたスパンIDを表示する方法

Question

<table> 
<?php 
for($i=1;$i<=10;$i++) 
{ 
?> 
<tr> 
    <td><input type="text" class="form-control changesNo" id="id_<?php echo $i;?>" name="quantity" value="" ></td> 
    <td><span id="sp_<?php echo $i;?>">200</span></td> 
    <td><span id="tt_<?php echo $i;?>"></span></td></tr> 
<?php 
} 
?> 
</table> 
<span id="gotal"></span> 

ここには10行が作成されています。テキストボックスに数値を入力するには、同じテキストボックス値とスパン値（例：（rslt =＃id_1 *＃sp_1））を入力し、その結果を＃tt_1に表示します。そして、＃のtt_1の合計が#gotal

に表示されますが、合計に入力がそれらの値を変更するたびに計算する必要がある場合は

Answer 1

私を助けてください：

• 入力変更のイベントハンドラは

  $（ 'input.form-control.changesNo'）。on（ 'input' ....

• ご関心の要素の各グループは、同じサフィックスを持っているので、あなたが使用することができます。

  element.id.split（「_」）ポップ（）

• 次の場所から起動する必要があります親テーブルの行：あなたが使用できる文字列で始まるIDを選択して、要素に

  $（要素）.closest（ 'TR'）

• ：

  $（ 'スパN [ID^= "のtt_"] '）

これは私の抜粋である以前のすべてのポイントを組み立て：

$(function() { 
 
    function refreshSums(element) { 
 
    var currentSuffix = element.id.split('_').pop(); 
 
    var sp = $('#sp_' + currentSuffix); 
 
    var tt = $('#tt_' + currentSuffix); 
 
    if (!isNaN(element.value) && element.value.length != 0) { 
 
     tt.text(+element.value * +sp.text()); 
 
     var total = 0; 
 
     $('span[id^="tt_"]').each(function (index, element) { 
 
     if (!isNaN(element.textContent) && element.textContent.length != 0) { 
 
      total += +element.textContent; 
 
     } 
 
     }); 
 
     $('#gotal').text(total); 
 
    } else { 
 
     tt.text(''); 
 
     $('#gotal').text(''); 
 
    } 
 

 
    } 
 

 
    // refresh the sums on document ready 
 
    $('input.form-control.changesNo').on('input', function (e) { 
 
    refreshSums(this); 
 
    }); 
 

 
    // compute the sums on document ready 
 
    $('input.form-control.changesNo').each(function (index, element) { 
 
    refreshSums(element); 
 
    }); 
 
});

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
 

 
<table> 
 
    <tr> 
 
     <td><input type="text" class="form-control changesNo" id="id_1" name="quantity" value=""></td> 
 
     <td><span id="sp_1">200</span></td> 
 
     <td><span id="tt_1"></span></td> 
 
    </tr> 
 
    <tr> 
 
     <td><input type="text" class="form-control changesNo" id="id_2" name="quantity" value=""></td> 
 
     <td><span id="sp_2">200</span></td> 
 
     <td><span id="tt_2"></span></td> 
 
    </tr> 
 
    <tr> 
 
     <td><input type="text" class="form-control changesNo" id="id_3" name="quantity" value=""></td> 
 
     <td><span id="sp_3">200</span></td> 
 
     <td><span id="tt_3"></span></td> 
 
    </tr> 
 
</table> 
 
<span id="gotal"></span>