ASP的Javascript:Repeater中的TextBox

时间:2011-04-11 21:40:05

标签: javascript asp.net textbox

好的,我将自己的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>

2 个答案:

答案 0 :(得分:2)

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

答案 1 :(得分:0)

使用像jquery这样的库你可以轻松地选择特定div中的所有输入框(比如你的转发器div),或者你可以专门为这些输入框添加一个类并以这种方式抓取它们。

将函数调用附加到onblur方法,这样当它们离开文本框时,你可以将它们相加。