使用 jquery 在网格视图中计算行总计和总计

Calculate Row Total and Grand Total in gridview using jquery

本文关键字：计算 jquery 网格 视图 使用      更新时间：2023-09-26
嗨，在

下面的JavaScript代码中，乘法在网格视图中的文本框模板字段txtQuantity和网格视图中的BoundField价格之间。

我的

问题是我的网格视图同时具有 txtQuantity 和 txtPrice 作为模板字段

<ItemTemplate><asp:TextBox ID="txtprice" runat="server" Text='<%# Bind("Price") %>'></asp:TextBox></ItemTemplate>
<ItemTemplate><asp:TextBox ID="txtQuantity" runat="server"></asp:TextBox></ItemTemplate>

我试图修改 JavaScript 代码 

 $("[id*=lblTotal]", row).html(parseFloat($("[id*=txtprice]", row).html()) * parseFloat($(this).val()));

但它给了我NaN

乘法的结果

原始 js 代码

<script type="text/javascript">
    $(function () {
        $("[id*=txtQuantity]").val("0");
    });
    $("[id*=txtQuantity]").live("change", function () {
        if (isNaN(parseInt($(this).val()))) {
            $(this).val('0');
        } else {
            $(this).val(parseInt($(this).val()).toString());
        }
    });
    $("[id*=txtQuantity]").live("keyup", function () {
        if (!jQuery.trim($(this).val()) == '') {
            if (!isNaN(parseFloat($(this).val()))) {
                var row = $(this).closest("tr");
                $("[id*=lblTotal]", row).html(parseFloat($(".price", row).html()) * parseFloat($(this).val()));
            }
        } else {
            $(this).val('');
        }
        var grandTotal = 0;
        $("[id*=lblTotal]").each(function () {
            grandTotal = grandTotal + parseFloat($(this).html());
        });
        $("[id*=lblGrandTotal]").html(grandTotal.toString());
    });
</script>

您的代码存在一些小问题，请尝试以下操作：

$(function () {
   $("[id*=txtQuantity").val("0");
});
$(document).on("change", "[id*=txtQuantity]", function () {
  if (isNaN(parseInt($(this).val()))) {
    $(this).val('0');
  } else {
    $(this).val(parseInt($(this).val()).toString());
  }
});
$(document).on("keyup mouseup", "[id*=txtQuantity]", function () {
  if (!jQuery.trim($(this).val()) == '') {
    if (!isNaN(parseFloat($(this).val()))) {
      var row = $(this).closest("tr");
      $("[id*=lblTotal]", row).html(parseFloat($("[id*=txtPrice]", row).val()) * parseFloat($(this).val()));
    }
  } else {
    $(this).val('');
  }
  var grandTotal = 0;
  $("[id*=lblTotal]").each(function () {
    var value = $(this).html();
    if(value != "")
      grandTotal = grandTotal + parseFloat(value);
  });
  $("[id*=lblGrandTotal]").html(grandTotal.toString());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table cellspacing="5">
  <tr>
    <td><input type="text" id="txtPrice1" value="100" /></td>
    <td><input type="text" id="txtQuantity1" value="1" /></td>
    <td><div id="lblTotal1" /></td>
  </tr>
  <tr>
    <td><input type="text" id="txtPrice2" value="200" /></td>
    <td><input type="text" id="txtQuantity2" value="2" /></td>
    <td><div id="lblTotal1" /></td>
  </tr>
  <tr>
    <td><input type="text" id="txtPrice3" value="300" /></td>
    <td><input type="text" id="txtQuantity3" value="3" /></td>
    <td><div id="lblTotal1" /></td>
  </tr>
</table>
<div id="lblGrandTotal" />

相关文章：