Javascript 与 ASP :TextBox inside Repeater

Question

好吧，我在将自己的 Javascript 与 ASP 服务器控件结合时遇到了一点问题。

图片:我的页面上有几个由转发器创建的 ASP:TextBoxes。我的目标是将用户键入这些文本框的所有值相加。每当用户更改文本框的内容时，都必须发生这种情况。 (在页面底部我有一个小的价格计算器，它与服务器端代码一起工作，但我想让它更动态，我说的是 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>

Answer 1

提供您的表 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");