Grid Berechnungen mit JavaScript

Question

Hallo, da der Grid-Ansicht wird

als Tabelle im Browser gerendert Wie kann ich unter JavaScript auf asp.net Grid-Ansicht

Demo auf HTML-Tabelle anwenden: jsfiddle

Javascript Code

Hinweis hier die Gesamtsumme berechnet zuerst dann jede Zeile insgesamt Summe durch die großen

geteilt

<script> 
    $(document).ready(function() { 
     $(".txtMult input").keyup(multInputs); 

     function multInputs() { 

      var $mult = 0; 
      // calculate Grand total 
      $("tr.txtMult").each(function() { 
       // get the values from this row: 
       var $val1 = $('.val1', this).val(); 
       var $val2 = $('.val2', this).val(); 
       var $total = ($val1) * ($val2); 
       $mult += $total; 
      }); 

      // for each row: 
      $("tr.txtMult").each(function() { 
       // get the values from this row: 
       var $val1 = $('.val1', this).val(); 
       var $val2 = $('.val2', this).val(); 
       var $total = ($val1) * ($val2); 
       var $Percentage = (($total/$mult)).toFixed(2); 
       $('.percentage', this).text($Percentage); 
       $('.multTotal', this).text($total); 
      }); 
      $("#grandTotal").text(mult); 
     } 
    }); 
</script> 

Grid-View-Code

<asp:GridView ID="testgrid" runat="server" AutoGenerateColumns="False"> 
    <Columns> 
     <asp:TemplateField HeaderText="Quantity"> 
      <ItemTemplate> 
       <asp:TextBox ID="txtCalcQuantity" placeholder="Enter Quantity" runat="server"></asp:TextBox> 
      </ItemTemplate> 
     </asp:TemplateField> 

     <asp:TemplateField HeaderText="Unit Price"> 
      <ItemTemplate> 
       <asp:TextBox ID="txtCalcUnitprice" placeholder="Enter Unit Price" runat="server"></asp:TextBox> 
      </ItemTemplate> 
     </asp:TemplateField> 

     <asp:TemplateField HeaderText="Total"> 
      <ItemTemplate> 
       <asp:Label ID="lblTotal" runat="server" Text="0"></asp:Label> 
      </ItemTemplate> 
     </asp:TemplateField> 

     <asp:TemplateField HeaderText="Percentage"> 
      <ItemTemplate> 
       <asp:Label ID="lblPercentage" runat="server"></asp:Label> 
      </ItemTemplate> 
     </asp:TemplateField> 

    </Columns> 

</asp:GridView> 

Ihre Hilfe sehr geschätzt wird

Answer 1

Grid View: 

<asp:GridView ID="testgrid" runat="server" AutoGenerateColumns="False" OnRowDataBound="testgrid_RowDataBound"> 
    <Columns> 
     <asp:TemplateField HeaderText="Quantity"> 
      <ItemTemplate> 
       <asp:TextBox ID="txtCalcQuantity" CssClass="val1" placeholder="Enter Quantity" runat="server"></asp:TextBox> 
      </ItemTemplate> 
     </asp:TemplateField> 

     <asp:TemplateField HeaderText="Unit Price"> 
      <ItemTemplate> 
       <asp:TextBox ID="txtCalcUnitprice" CssClass="val2" placeholder="Enter Unit Price" runat="server"></asp:TextBox> 
      </ItemTemplate> 
     </asp:TemplateField> 

     <asp:TemplateField HeaderText="Total"> 
      <ItemTemplate> 
       <asp:Label ID="lblTotal" CssClass="multTotal" runat="server" Text="0"></asp:Label> 
      </ItemTemplate> 
     </asp:TemplateField> 

     <asp:TemplateField HeaderText="Percentage"> 
      <ItemTemplate> 
       <asp:Label ID="lblPercentage" CssClass="percentage" runat="server"></asp:Label> 
      </ItemTemplate> 
     </asp:TemplateField> 

    </Columns> 

</asp:GridView> 
     <asp:Label ID="grandTotal" runat="server"></asp:Label> 

GV backend: 

protected void testgrid_RowDataBound(object sender, GridViewRowEventArgs e) 
     { 
      if (e.Row.RowType == DataControlRowType.DataRow) 
      { 

        e.Row.CssClass = "txtMult"; 

      } 
     } 

Javascript : 

<script> 
    $(document).ready(function() { 
     $(".txtMult input").keyup(multInputs); 

     function multInputs() { 

      var $mult = 0; 
      // calculate Grand total 
      $("tr.txtMult").each(function() { 
       // get the values from this row: 
       var $val1 = $('.val1', this).val(); 
       var $val2 = $('.val2', this).val(); 
       var $total = ($val1) * ($val2); 
       $mult += $total; 
      }); 

      // for each row: 
      $("tr.txtMult").each(function() { 
       // get the values from this row: 
       var $val1 = $('.val1', this).val(); 
       var $val2 = $('.val2', this).val(); 
       var $total = ($val1) * ($val2); 
       var $Percentage = (($total/$mult)).toFixed(2); 
       $('.percentage', this).text($Percentage); 
       $('.multTotal', this).text($total); 
      }); 
      $("#<%=grandTotal.ClientID %>").text($mult); 
     } 
    });