Javascript with ASP:TextBox inside Repeater

本文关键字：inside Repeater TextBox with ASP Javascript 更新时间：2023-09-26

好吧，我有一个小问题，结合我自己的Javascript与ASP服务器控件。

图片:我有几个ASP:文本框在我的页面上是由一个重复器创建的。我的目标是将用户在这些文本框中键入的所有值相加。当用户更改文本框的内容时，必须执行此操作。(在页面的底部，我得到了一个小价格计算器，它与服务器端代码的工作，但我想使它更动态，我说的是txtTeam和txtPart)

<asp:Content ID="Content3" ContentPlaceHolderID="contentPlaceHolder" runat="Server">
<script type="text/javascript"> 
</script>
<div id='inputDiv'>
    <h1>
        Students per team</h1>
    <table>
        <tr>
            <td>
                Team
            </td>
            <td>
                Actual
            </td>
            <td>
                Maximum
            </td>
        </tr>
        <asp:Repeater ID="Repeater2" runat="server" DataSourceID="odsTeams">
            <ItemTemplate>
                <tr>
                    <td id='td<%# Eval("team_id") %>'>
                        <%# Eval("name") %>
                    </td>
                    <td id='txtTeam<%# Eval("team_id") %>'>
                        <asp:TextBox ID="txtTeam" runat="server"></asp:TextBox>
                        <asp:RangeValidator EnableClientScript="true" ID="rgvTeams" runat="server" ErrorMessage="*"
                            MinimumValue="0" MaximumValue='<%# Eval("st_max") %>' ControlToValidate="txtTeam"></asp:RangeValidator>
                    </td>
                    <td id='lblTeam<%# Eval("team_id") %>'>
                        <asp:Label runat="server">
                        <%# Eval("st_max") %>
                        </asp:Label>
                    </td>
                </tr>
            </ItemTemplate>
        </asp:Repeater>
    </table>
    <asp:ObjectDataSource ID="odsTeams" runat="server" OldValuesParameterFormatString="original_{0}"
        SelectMethod="GetTeamsByDelegationID" TypeName="ERASTableAdapters.tbl_teamTableAdapter"
        OnSelecting="odsTeams_Selecting">
        <SelectParameters>
            <asp:Parameter Name="delegation_id" Type="Int32" />
        </SelectParameters>
    </asp:ObjectDataSource>
    <h1>
        Additional Participants</h1>
    <table>
        <tr>
            <td>
                Category
            </td>
            <td>
                Actual
            </td>
            <td>
                Maximum
            </td>
        </tr>
        <asp:Repeater ID="Repeater1" runat="server" DataSourceID="odsParticipantsCat">
            <ItemTemplate>
                <tr>
                    <td id='<%# Eval("participant_category_id") %>'>
                        <%# Eval("name") %>
                    </td>
                    <td id='txtPart<%# Eval("participant_category_id") %>'>
                        <asp:TextBox ID="txtPart" runat="server" Enabled='<%# getMax(Eval("key").ToString()) > 0 %>'></asp:TextBox>
                        <asp:RangeValidator EnableClientScript="true" ID="rgvPart" runat="server" ErrorMessage="*"
                            MinimumValue="0" MaximumValue='<%# getMax(Eval("key").ToString())%>' ControlToValidate="txtPart"></asp:RangeValidator>
                    </td>
                    <td id='lblPart<%# Eval("participant_category_id") %>'>
                        <asp:Label runat="server">
                        <%# getMax(Eval("key").ToString())%>
                        </asp:Label>
                    </td>
                </tr>
            </ItemTemplate>
        </asp:Repeater>
        <asp:ObjectDataSource ID="odsParticipantsCat" runat="server" OldValuesParameterFormatString="original_{0}"
            SelectMethod="GetAdditionalParticipantCategories" TypeName="ERASTableAdapters.tbl_participant_categoryTableAdapter">
        </asp:ObjectDataSource>
    </table>
</div>
<h1>
    Advance to be paid</h1>
<table>
    <tr>
        <td>
            Number of participants
        </td>
        <td>
            Days
        </td>
        <td>
            Price
        </td>
        <td>
            Total
        </td>
    </tr>
    <tr>
        <td runat="server" id="tdNumberPart1">
            0
        </td>
        <td runat="server" id="tdDays1">
            0
        </td>
        <td runat="server" id="tdPrice1">
            0
        </td>
        <td runat="server" id="tdTotal1">
            0
        </td>
    </tr>
    <tr>
        <td runat="server" id="tdNumberPart2">
            0
        </td>
        <td>
            N/A
        </td>
        <td runat="server" id="tdPrice2">
            0
        </td>
        <td runat="server" id="tdTotal2">
            0
        </td>
    </tr>
    <tr>
        <td>
        </td>
        <td>
        </td>
        <td>
        </td>
        <td runat="server" id="tdGrandTotal" style="font-weight: bold">
            0
        </td>
    </tr>
</table>
<asp:Button runat="server" ID="btnConfirm" Text="Confirm" OnClick="btnConfirm_Click"
    Style="height: 29px" />
    <asp:Label runat="server" ID="lblInfo"></asp:Label>

给出您的表id，例如<table id="students">和<table id="additional">。然后，遍历行，在每行中找到输入元素，并对值求和:

function sumTable(id)
{
    var count = 0;
    var studentTable = document.getElementById(id);
    for (var i=1; i in studentTable.rows; i++)
    {
        var r = studentTable.rows[i];
        var input = r.getElementsByTagName("input")[0];
        var n = parseFloat(input.value);
        if (isFinite(n)) count += n;
    }
    return count;
}
var totalParticipants = sumTable("students") + sumTable("additional");

使用像jquery这样的库，你可以很容易地选择特定div(比如你的repeaterdiv)中的所有输入框，或者你可以为这些输入框添加一个类，并以这种方式抓取它们。

将函数调用附加到onblur方法中，这样当它们离开文本框时，您就可以对它们进行汇总。