在Repeater控件中保持运行总数，尝试修改现有代码

Question

我有一个脚本，当值被输入到GridView窗体控件时，它一直在运行总计。

这个很好用。以下是代码：

  <script type="text/javascript">
        $(function () {
            $('[id*=txttaxpayerret]').keyup(function () {
                totalcalculate();
            });
            window.onload = totalcalculate();
            function totalcalculate() {
                var total = 0;
                for (var i = 0; i < $('.txttaxpayerret').length; i++) {
                    var temp = $('.txttaxpayerret')[i].value;
                    temp != "" ? temp : temp = 0;
                    total = parseFloat(temp) + parseFloat(total);
                    $('[id*=lblTotal]').html(total);
                }
            }
        });
 </script>
<asp:Label ID="lblTotal" runat="server"></asp:Label>

我们最近从GridView控件切换到了Repeater，从那时起，代码停止工作。

我一直试图修改，以便与复读机控制工作，但没有任何效果。

有什么想法吗?如何使这段代码在被输入时继续运行到整个用户的条目？

llblTotal不在Repeater控制范围之内。

但是，txttaxpayerret位于Repeater控件中。

<asp:TextBox ID="txttaxpayerret" runat="server" Width="280px"></asp:TextBox>

更新：

         <asp:Repeater ID="rptAircraft" runat="server">
                <ItemTemplate>
                  <tr>
                    <td>
                         <asp:TextBox ID="TextBox2" runat="server" Width="280px" Text='<%#Eval("taxpayerret") %>'></asp:TextBox>
                    </td>
                </tr>
             </ItemTemplate>
           </asp:Repeater>
          <tr>
            <td>
                 <asp:TextBox ID="txttaxpayerret"  CssClass="clsTxtToCalculate" runat="server" Width="280px"></asp:TextBox>
            </td>
          </tr>
         </table>
         asp:Button ID="btnAdd" runat="server" Width="70px" Text="Add More" onclick="btnAdd_Click" />
         <asp:Label ID="lblTotal" runat="server"></asp:Label>

更新：

<script type="text/javascript">
   $(function () {
        $('body').on('keyup', '.taxInput', function (e) {
            totalcalculate();
        });
        window.onload = totalcalculate();
        function totalcalculate() {
            var total = 0;
            for (var i = 0; i < $('.taxInput').length; i++) {
                var temp = $('.taxInput')[i].value;
                temp != "" ? temp : temp = 0;
                total = parseFloat(temp) + parseFloat(total);
                $('[id*=lblTotal]').html(total);
            }
        }
});

  <table border="1" style="width:50%;text-align:center">
<tr>
<td style="width:100%;vertical-align: text-top;">
<asp:ScriptManager ID="scriptManager" runat="server"></asp:ScriptManager>
 <asp:UpdatePanel ID="upPanael" runat="server">
  <ContentTemplate>
    <div><div>
        <table border="1">
            <tr>
                <th>
                    AIRCRAFT REGISTRATION #:
                </th>
                <th>
                    RETURNED VALUE<br /> 
                </th>
                <th>
                    FOR TAX OFFICE USE ONLY<br />
                </th>
                <th>&nbsp;</th>
            </tr>
             <asp:Repeater ID="rptAircraft" runat="server">
                    <ItemTemplate>
                      <tr>
                        <td>
                            <asp:TextBox ID="TextBox1" runat="server" Width="530px" Text='<%#Eval("boatregNum") %>'></asp:TextBox>
                        </td>
                        <td>
                             <asp:TextBox ID="TextBox2" runat="server" Width="280px" Text='<%#Eval("taxpayerret") %>'></asp:TextBox>
                        </td>
                        <td>
                            <asp:TextBox ID="TextBox3" runat="server" Width="256px" Text='<%#Eval("fortaxofficeonly") %>'></asp:TextBox>
                        </td>
                        <td>&nbsp;</td>
                    </tr>
                 </ItemTemplate>
               </asp:Repeater>
              <tr>
                <td>
                    <asp:TextBox ID="txtboatregNum" runat="server" Width="530px"></asp:TextBox>
                </td>
                <td>
                     <asp:TextBox ID="txttaxpayerret"  CssClass="taxInput" runat="server" Width="280px"></asp:TextBox>
                </td>
                <td>
                    <asp:TextBox ID="txtfortaxofficeonly" runat="server" Width="256px"></asp:TextBox>
                </td>
                <td style="white-space:nowrap;">
                   <asp:Button ID="btnAdd" runat="server" Width="70px" Text="Add New" onclick="btnAdd_Click" />
                   <asp:Button ID="btnDelete" runat="server" Width="70px" Text="Remove" OnClick="btnDelete_Click" />
                </td>
            </tr>
        </table>
    </div>
    </div>
   </ContentTemplate>
  </asp:UpdatePanel>
   </td>
    </tr>
  </table>
  <table border="1" style="width: 87%; text-align: center">
    <tr>
        <td style="width: 43.6%;">
            TOTAL&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;>
        </td>
        <td style="width: 23.2%;">
            <asp:Label ID="lblTotal" runat="server"></asp:Label>
        </td>
        <td class="auto-style4">
        </td>
    </tr>
</table>

protected void btnAdd_Click(object sender, EventArgs e)
{
    DataTable dtAircraft = new DataTable();
    dtAircraft = GetAircraftInfo();

    if (ViewState["AircraftTable"] != null)
    {
        dtAircraft = (DataTable)ViewState["AircraftTable"];


        rptAircraft.DataSource = dtAircraft;
        rptAircraft.DataBind();
        rptAircraft.Visible = true;
    }
    else
    {
        rptAircraft.DataSource = null;
        rptAircraft.DataBind();
        rptAircraft.Visible = false;
    }
    txtboatregNum.Text = string.Empty;
    txttaxpayerret.Text = string.Empty;
    txtfortaxofficeonly.Text = string.Empty;
}

private DataTable GetAircraftInfo()
{

    DataTable dtAircraft = null;
    if (ViewState["RowNumber"] != null)
    {
        int RowNumber = Convert.ToInt32((ViewState["RowNumber"]));
        RowNumber++;
        ViewState["RowNumber"] = RowNumber;
    }
    else
    {
        ViewState["RowNumber"] = 1;
    }

    if (ViewState["AircraftTable"] == null)
    {
        dtAircraft = new DataTable("AircraftTable");
        dtAircraft.Columns.Add(new DataColumn("RowNumber", typeof(int)));
        dtAircraft.Columns.Add(new DataColumn("boatregNum", typeof(string)));
        dtAircraft.Columns.Add(new DataColumn("taxpayerret", typeof(string)));
        dtAircraft.Columns.Add(new DataColumn("fortaxofficeonly", typeof(string)));

        ViewState["AircraftTable"] = dtAircraft;
    }
    else
    {
        dtAircraft = (DataTable)ViewState["AircraftTable"];
    }
    DataRow dtRow = dtAircraft.NewRow();

    dtRow["RowNumber"] = Convert.ToInt32(ViewState["RowNumber"]);
    dtRow["boatregNum"] = txtboatregNum.Text.Trim();
    dtRow["taxpayerret"] = txttaxpayerret.Text.Trim();
    dtRow["fortaxofficeonly"] = txtfortaxofficeonly.Text.Trim();
    dtAircraft.Rows.Add(dtRow);
    ViewState["AircraftTable"] = dtAircraft;
    return dtAircraft;
}

Answer 1

当您执行此$('.txttaxpayerret')时，您将尝试使用名为txttaxpayerret的类获取输入(引用：selectors)。

您可以通过在输入中添加一个类来解决这个问题。

<asp:TextBox ID="txttaxpayerret" CssClass="taxInput" runat="server" Width="280px"></asp:TextBox>

然后您可以使用该类作为选择器：

   $(function () {
        $('body').on('keyup', '.taxInput', function (e) {
            totalcalculate();
        });
        window.onload = totalcalculate();
        function totalcalculate() {
            var total = 0;
            for (var i = 0; i < $('.taxInput').length; i++) {
                var temp = $('.taxInput')[i].value;
                temp != "" ? temp : temp = 0;
                total = parseFloat(temp) + parseFloat(total);
                $('[id*=lblTotal]').html(total);
            }
        }
    });

Answer 2

重命名了Repeater contol中的TextBox的ID。它就像Repeater1_txttaxpayerret一样。因此，最好绑定到类名或text的输入类型。

class绑定

<asp:TextBox ID="txttaxpayerret" CssClass="txttaxpayerret" runat="server"></asp:TextBox>

$('.txttaxpayerret').keyup(function () {
    totalcalculate();
});

或者用一个已知ID的div包住中继器并循环输入。

<div id="myRepeater">
    <asp:Repeater ID="Repeater1" runat="server">
        <ItemTemplate>
            <asp:TextBox ID="txttaxpayerret" runat="server"></asp:TextBox><br />
        </ItemTemplate>
    </asp:Repeater>
</div>

$('#myRepeater input[type="text"]').keyup(function () {
    totalcalculate();
});

现在您已经正确地绑定了keyup函数。现在，您可以使用each循环它们并获取它们的值。

function totalcalculate() {
    var total = 0;
    $('#myRepeater input[type="text"]').each(function () {
        if ($(this).val() != "") {
            total += parseFloat($(this).val());
        }
    });
    $("#<%= lblTotal.ClientID %>").text(total);
}

// or use $('.txttaxpayerret').each