Question

我正在使用jquery计算行总数和总计，但我唯一的问题是我在回发后丢失了文本框值。单击AddNewRow按钮时，每个文本框都会重置为0。

<script type="text/javascript">
   $(function () {
     $("[id*=txtDay1]").val("0");
     $("[id*=txtDay2]").val("0");

   });

   $("[id*=txtDay1]").live("keyup", function () {
     if (!jQuery.trim($(this).val()) == '') {
       if (!isNaN(parseFloat($(this).val()))) {
         var row = $(this).closest("tr");
         var number = parseFloat($("[id*=txtDay1]", row).val());
         $("[id*=lblTotal]", row).html(parseFloat($("[id*=txtDay2]", row).val()) + parseFloat($(this).val()));
       }
     } else {
       $(this).val('');
     }
     var grandTotal = 0;
     $("[id*=lblTotal]").each(function () {
       grandTotal = grandTotal + parseFloat($(this).html());
     });
     $("[id*=lblGrandTotal]").html(grandTotal.toString());
   });


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

这是我的gridview

<asp:GridView ID="gv_Sub" runat="server" OnRowDataBound="gv_WeeklySub_RowDataBound" CssClass="table table-hover table-bordered table-responsive"

      GridLines="None" OnRowDeleting="gv_Sub_RowDeleting">
      <Columns>

        <asp:BoundField DataField="RowNumber" HeaderText="Row ID" />


        <asp:TemplateField HeaderText="Day1">
          <ItemTemplate>
            <asp:TextBox ID="txtDay1" CssClass="form-control" runat="server" autocomplete="off"></asp:TextBox>
          </ItemTemplate>
            <ItemStyle Width="40px" BackColor="#cccccc"/>
        </asp:TemplateField>

        <asp:TemplateField HeaderText="Day2">
          <ItemTemplate>
            <asp:TextBox ID="txtDay2" CssClass="form-control" runat="server" autocomplete="off"></asp:TextBox>
          </ItemTemplate>
            <FooterStyle HorizontalAlign="Right" />
          <FooterTemplate>
            <asp:Button ID="ButtonAdd" runat="server"
              Text="Add New Row" OnClick="ButtonAdd_Click" />
          </FooterTemplate>
        </asp:TemplateField>

         <asp:TemplateField HeaderText="">
             <FooterStyle HorizontalAlign="Right" />
          <FooterTemplate>
            <asp:Label ID="lblGrand" CssClass="text-primary" runat="server" Text="Grand Total:"></asp:Label>
          </FooterTemplate>
           <ItemStyle Width="40px" BackColor="#cccccc"/>
        </asp:TemplateField>   


          <asp:TemplateField HeaderText = "Total">
          <ItemTemplate>
              <asp:Label ID="lblTotal" CssClass="text-primary" runat="server" Text="0"></asp:Label>
          </ItemTemplate>
                 <%-- <FooterStyle HorizontalAlign="Right" />--%>
          <FooterTemplate>
            <asp:Label ID="lblGrandTotal" CssClass="text-primary" runat="server" Text="0"></asp:Label>
          </FooterTemplate>
      </asp:TemplateField>

        <asp:CommandField ShowDeleteButton="True" />
      </Columns>      
    </asp:GridView>

Answer 1

其实你正在清理它。只需修复此代码：

$(function () {
    if($("[id*=txtDay1]").val() == "")
        $("[id*=txtDay1]").val("0")

    if($("[id*=txtDay2]").val() == "")
        $("[id*=txtDay2]").val("0");

    //calculating grand total on postback
    calculateGrandTotal();
   });

您需要立即重新计算grandTotal，为此创建function并在任何地方使用它：

$("[id*=txtDay1]").live("keyup", function () {
 if (!jQuery.trim($(this).val()) == '') {
   if (!isNaN(parseFloat($(this).val()))) {
     var row = $(this).closest("tr");
     var number = parseFloat($("[id*=txtDay1]", row).val());
     $("[id*=lblTotal]", row).html(parseFloat($("[id*=txtDay2]", row).val()) + parseFloat($(this).val()));
   }
 } else {
   $(this).val('');
 }

 //calculate grand total
 calculateGrandTotal();

 //remove this
 /*var grandTotal = 0;
 $("[id*=lblTotal]").each(function () {
   grandTotal = grandTotal + parseFloat($(this).html());
 });
 $("[id*=lblGrandTotal]").html(grandTotal.toString());*/
});


$("[id*=txtDay2]").live("keyup", function () {
 if (!jQuery.trim($(this).val()) == '') {
   if (!isNaN(parseFloat($(this).val()))) {
     var row = $(this).closest("tr");
     var number = parseFloat($("[id*=txtDay2]", row).val());
     $("[id*=lblTotal]", row).html(parseFloat($("[id*=txtDay1]", row).val())  + parseFloat($(this).val()));
   }
 } else {
   $(this).val('');
 }

 //calculate grand total
 calculateGrandTotal();

 //remove this
 /*var grandTotal = 0;
 $("[id*=lblTotal]").each(function () {
   grandTotal = grandTotal + parseFloat($(this).html());
 });
 $("[id*=lblGrandTotal]").html(grandTotal.toString());*/
});

function calculateGrandTotal(){
    var grandTotal = 0;
    $("[id*=lblTotal]").each(function () {
        grandTotal = grandTotal + parseFloat($(this).html());
    });
    $("[id*=lblGrandTotal]").html(grandTotal.toString());
}

Answer 2

你需要使用IsPostBack方法，因为你正在使用JS，所以在你的c＃代码后面写这个。

if(IsPostBack)
{
   ClientScript.RegisterClientScriptBlock(GetType(), "IsPostBack", "var isPostBack = true;", true);
}

然后使用此方法包装JS计算并输出值文本框

if(!isPostBack) {
   //display your value in the textbox
}

如何在回发后保留文本框值

2 个答案: