Question

我需要计算数量乘以单位价格输入，相等输入将是小计并且总和所有小计...

我在javascript中使用了这个代码，它运行正常，但是在表格中没有用。

请帮忙。

HTML / PHP：

InvalidOperationException: Method 'InvokeAsync' of view component 'MVCApp.Components.ExampleViewComponent' should be declared to return Task<T>.

这是javascript代码：

<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="" />

Answer 1

您的JavaScript代码未将事件处理程序附加到任何尚不存在的input元素，而只附加到页面加载时存在的单对文本input。

添加行时，将不会捕获这些新input元素上的input事件。为此，您应该使用event delegation。

其次，您的input元素都是其父td元素的单个子元素，因此当您对它们应用next方法时，它不会返回任何内容。

相反，您可以检索触发事件的表行，然后从该行中的.unit和.qty输入中读取值，然后更新.amount元素在同一行：

// 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访问这些字段，如果你需要在页面中有这些字段的多个实例，我建议用PHP生成id。

使用类的工作示例（HTML由OP的片段组成）：

＆＃13;

$(".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);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table><tr>
	<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 generated code -->
	</select></td>
	<td><input type="text" id="total" class="amount" value="" /></td>
</tr></table>
<!-- later -->
<input type="text" name="totalprice" class="result" value="" />

＆＃13;

计算数量乘以单位价格输入和相等输入将是小计并且总和所有小计

2 个答案: