在 Repeater 控件中保留一个运行总数，试图修改现有代码

Question

我有一个脚本可以在将值输入到 GridView 表单控件时保持运行tals。

效果很好。下面是代码：

  <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，从那时起，代码就停止工作了。

我一直在尝试修改以使用 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 的 class 获取输入（参考：https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors）

您可以通过在输入中添加 class 来解决此问题。

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

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

   $(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 控件内的 TextBox 的 ID 已重命名。它变成了 Repeater1_txttaxpayerret 之类的东西。所以最好绑定到 class 名称或 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

在 Repeater 控件中保留一个运行总数，试图修改现有代码

Keep a running total in Repeater control, trying to modify existing code

c#

asp.net

jquery

repeater

在 Repeater 控件中保留一个 运行 总数，试图修改现有代码

Keep a running total in Repeater control, trying to modify existing code

c#

asp.net

jquery

repeater

在 Repeater 控件中保留一个运行总数，试图修改现有代码