計算量乗算単価入力と同じ入力が小計であると私は数量乗算単価入力と同じ入力が小計であることと、すべての小計を合計する計算するために必要なすべての小計

Question

を合計します...

私はこのコードを使用JavaScriptが正常に動作していますが、テーブルで動作しませんでした。

助けてください。

HTML/PHP：

<table border="0" cellspacing="0" class="table table-bordered table-hover" data-name="cont-table"> 
    <thead style=""> 
     <tr> 
      <th class="check-this"><input class="check_all" type="checkbox" onclick="select_all()"/></th> 
      <th class="text-center"> م </th> 
      <th class="text-center"> اسم الصنف </th> 
      <th class="text-center"> الوحدة </th> 
      <th class="text-center"> الكمية </th> 
      <th class="text-center"> سعر الوحدة </th> 
      <th class="text-center"> العام المالي </th> 
      <th class="text-center"> إجمالي قيمة الصنف </th> 
     </tr> 
    </thead> 
    <tr> 
     <td><input type="checkbox" class="case"/></td> 
     <td><span id="snum">1.</span></td> 
     <td><!--<input type="text" id="first_name" name="first_name[]"/>!--> 
     <select class="select" id="first_name" name="first_name[]"> 
      <?php 
       $stmt = $db->query("SELECT first_name6 FROM item"); 
       //$stmt = $pdo->execute(); 
       while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) { 
        echo "<option >" . $row['first_name6'] . "</option>"; 
       } 
      ?> 
     </select></td> 
     <td><!--<input type="text" id="last_name" name="last_name[]"/>!--> 
     <select class="select" id="first_name" name="first_name[]"> 
      <?php 
       $stmt = $db->query("SELECT first_name7 FROM unit"); 
       //$stmt = $pdo->execute(); 
       while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) { 
        echo "<option >" . $row['first_name7'] . "</option>"; 
       } 
      ?> 
     </select></td> 
     <td><input class="select qty" type="number" id="tamil" name="tamil[]"/></td> 
     <td><input class="select unit" type="number" id="english" name="english[]" /></td> 
     <td><!--<input type="text" id="computer" name="computer[]"/>!--> 
     <select class="select " id="first_name" name="first_name[]"> 
      <?php 
       $stmt = $db->query("SELECT first_name8 FROM financial"); 
       //$stmt = $pdo->execute(); 
       while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) { 
        echo "<option >" . $row['first_name8'] . "</option>"; 
       } 
      ?> 
     </select></td> 
     <td><input type="text" id="total" class="amount" value="" /></td> 
    </tr> 
</table> 
<button id="add_row" type="button" class="delete btn btn-default pull-right">مسح</button> 
<button id="add_row" style="margin-right:5px;" type="button" class="addmore btn btn-default pull-right">اضاف صنف</button> 
<br> 
<br> 
<h3 class="table-h3 " style="text-align:center;">اجمالي قيمة العقد</h3> 
<input type="text" name="totalprice" class="result" value="" /> 

と、これはjavascriptのコードです：

$(".qty").on('input', function() { 
    var self = $(this); 
    var unitVal = self.next().val(); 
    self.next().next().val(unitVal * self.val()); 
    fnAlltotal(); 
}); 
$(".unit").on('input', function() { 
    var self = $(this); 
    var qtyVal = self.prev().val(); 
    self.next().val(qtyVal * self.val()); 
    fnAlltotal(); 
}); 
function fnAlltotal(){ 
    var total=0 
    $(".amount").each(function(){ 
     total += parseFloat($(this).val()||0); 
    }); 
    $(".result").val(total); 
} 

Answer 1

JavaScriptコードが添付されていないイベントハンドラをinput要素のいずれかにまだ存在しないが、ページのロード時に存在する1組のテキストのinputにのみ適用されます。

行を追加すると、新しいinput要素のinputイベントはキャプチャされません。そのためにはevent delegationを使用してください。

第2に、input要素はすべて親のtd要素のすべての子要素であるため、nextメソッドを適用すると何も返されません。

代わりに、イベントがでトリガされているテーブルの行を取得し、その同じ行の.amount要素更新するために、その行の両方.unitと.qty入力から値を読み取ることができます：

// Use event delegation to capture events on rows that will only exist in future 
$(document).on('input', '.qty, .unit', function (e) { // get event 
    // get number of row this event is occurring in: 
    var row = $(e.target).closest('tr').index(); 
    // get both unit and qty from that row: 
    var unitVal = $('.unit').eq(row).val(); 
    var qtyVal = $('.qty').eq(row).val(); 
    // update the amount in that row: 
    $('.amount').eq(row).val(unitVal * qtyVal); 
    // adapt total (no change to your code) 
    fnAlltotal(); 
}); 

Answer 2

あなたは以下のコードで見ることができるように、inputは何nextを持っていない：

<td><input class="select qty" type="number" id="tamil" name="tamil[]"/></td> 

要素はtdで単独です。

がnext() in jQUery documentationを参照してください、それは言う：

.next（）

は、マッチした要素の集合の各要素の直後の兄弟を取得します。セレクタが提供されている場合は、そのセレクタに一致する場合にのみ次の兄弟を取得します。だから、

そして、私が先に言ったように、問題のinput要素は全く兄弟を持っていない、それだけではあり...

、あなたが実行し...

self.next() 

それは何も選択していません、したがって...

self.next().val() 

返信undefinedです。

prevを使用するコードにも同様の問題があります。あなたはページ内のこれらのフィールドの複数のインスタンスを持っている必要がある場合

---

それは、すべての可能なアクセスidすることにより、これらのフィールドは、私はIDがPHPでそれらを形成生成することを示唆しています。

---

実施例使用したクラスは、（HTMLはOPの断片で作られて）：

$(".qty").on('input', compute); 
 
$(".unit").on('input', compute); 
 
function compute() 
 
{ 
 
    // // if there is only one element with those classes 
 
    // var qtyVal = $(".qty").val(); 
 
    // var unitVal = $(".unit").val(); 
 
    // // otherwise... 
 
    
 
    // get the tr that contains the element that triggered the event 
 
    var tr = $(this).closest("tr"); 
 
    var qtyVal = tr.find(".qty").val(); // find .qty within that tr 
 
    var unitVal = tr.find(".unit").val(); // find .unit within that tr 
 
    
 
    // check for when the input aren't found 
 
    if (typeof qtyVal == "undefined" || typeof unitVal == "undefined") 
 
    { 
 
    // leave the function 
 
    return; 
 
    } 
 
    
 
    // write amount 
 

 
    // // if there is only one element with those classes 
 
    // $(".amount").val(qtyVal * unitVal); 
 
    // // otherwise... 
 

 
    tr.find(".amount").val(qtyVal * unitVal); 
 

 
    // call fnAlltotal 
 
    fnAlltotal(); 
 
} 
 
function fnAlltotal(){ 
 
    var total=0 
 
    $(".amount").each(function(){ 
 
     total += parseFloat($(this).val()||0); 
 
    }); 
 
    $(".result").val(total); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table><tr> 
 
\t <td><input class="select qty" type="number" id="tamil" name="tamil[]"/></td> 
 
\t <td><input class="select unit" type="number" id="english" name="english[]" /></td> 
 
\t <td><!--<input type="text" id="computer" name="computer[]"/>!--> 
 
\t <select class="select " id="first_name" name="first_name[]"> 
 
\t \t <!-- PHP generated code --> 
 
\t </select></td> 
 
\t <td><input type="text" id="total" class="amount" value="" /></td> 
 
</tr></table> 
 
<!-- later --> 
 
<input type="text" name="totalprice" class="result" value="" />