Question

我有以下代码：

<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">

<table>
    <tr>
        <td>
            <asp:DropDownList ID="ddlStart1" runat="server" CssClass="ddl">
                <asp:ListItem>9:00</asp:ListItem>
                <asp:ListItem>10:00</asp:ListItem>
                <asp:ListItem>11:00</asp:ListItem>
            </asp:DropDownList>
            <asp:DropDownList ID="ddlEnd1" runat="server" CssClass="ddl">
                <asp:ListItem>9:00</asp:ListItem>
                <asp:ListItem>10:00</asp:ListItem>
                <asp:ListItem>11:00</asp:ListItem>
            </asp:DropDownList>
        </td>
        <td>
            <asp:DropDownList ID="ddlStart2" runat="server" CssClass="ddl">
                <asp:ListItem>9:00</asp:ListItem>
                <asp:ListItem>10:00</asp:ListItem>
                <asp:ListItem>11:00</asp:ListItem>
            </asp:DropDownList>
            <asp:DropDownList ID="ddlEnd2" runat="server" CssClass="ddl">
                <asp:ListItem>9:00</asp:ListItem>
                <asp:ListItem>10:00</asp:ListItem>
                <asp:ListItem>11:00</asp:ListItem>
            </asp:DropDownList>
        </td>
        <td>
            <asp:TextBox ID="txtBoxRow1" runat="server"></asp:TextBox>
        </td>
    </tr>
    <tr>
        <td>
            <asp:DropDownList ID="ddlStart3" runat="server" CssClass="ddl">
                <asp:ListItem>9:00</asp:ListItem>
                <asp:ListItem>10:00</asp:ListItem>
                <asp:ListItem>11:00</asp:ListItem>
            </asp:DropDownList>
            <asp:DropDownList ID="ddlEnd3" runat="server" CssClass="ddl">
                <asp:ListItem>9:00</asp:ListItem>
                <asp:ListItem>10:00</asp:ListItem>
                <asp:ListItem>11:00</asp:ListItem>
            </asp:DropDownList>
        </td>
        <td>
            <asp:DropDownList ID="ddlStart4" runat="server" CssClass="ddl">
                <asp:ListItem>9:00</asp:ListItem>
                <asp:ListItem>10:00</asp:ListItem>
                <asp:ListItem>11:00</asp:ListItem>
            </asp:DropDownList>
            <asp:DropDownList ID="ddlEnd4" runat="server" CssClass="ddl">
                <asp:ListItem>9:00</asp:ListItem>
                <asp:ListItem>10:00</asp:ListItem>
                <asp:ListItem>11:00</asp:ListItem>
            </asp:DropDownList>
        </td>
        <td>
            <asp:TextBox ID="txtBoxRow2" runat="server"></asp:TextBox>
        </td>
    </tr>
    <tr>
        <td>
            <asp:TextBox ID="txtBoxCol1" runat="server"></asp:TextBox>
        </td>
        <td>
            <asp:TextBox ID="txtBoxCol2" runat="server"></asp:TextBox>
        </td>
        <td>
            &nbsp;
        </td>
    </tr>
</table>

<asp:Button ID="Button1" runat="server" Text="Button" />

<div id="content"></div>

<script src="Scripts/jquery-1.10.2.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        $(".ddl").each(function (index) {
            $(this).change(function () {
                calculateSumRow();
                calculateSumCol();
            });
        });
    });

    function calculateSumRow() {
        var sum = 0;
        $(".ddl").each(function (index) {
            if (!isNaN(this.value) && this.value.length != 0) {
                sum += parseFloat(this.value);
            }
        });

        //.toFixed() method will roundoff the final sum to 2 decimal places
        $("#txtBoxRow1").value(sum.toFixed(2));
    }

    function calculateSumRow() {
        var sum = 0;
        $(".ddl").each(function (index) {
            if (!isNaN(this.value) && this.value.length != 0) {
                sum += parseFloat(this.value);
            }
        });

        //.toFixed() method will roundoff the final sum to 2 decimal places
        $("#txtBoxCol1").value(sum.toFixed(2));
    }
</script>

我想要完成的是计算每行和每列的小时数。希望代码尽可能使用索引来调用我的Ids。我是JQuery的新手。任何帮助将不胜感激。

谢谢

Answer 1

假设您可以将start和end类添加到您的ddls中，如下所示：

<asp:DropDownList ID="ddlStart1" runat="server" CssClass="ddl start">

和

<asp:DropDownList ID="ddlEnd1" runat="server" CssClass="ddl end">

此代码将解决：

function differenceInMinutes($startDdl, $endDdl){
  var startParts = $startDdl.val().split(":");
      endParts = $endDdl.val().split(":"),
      startInMinutes = parseInt(startParts[1]) + parseInt(startParts[0]) * 60,
      endInMinutes = parseInt(endParts[1]) + parseInt(endParts[0]) * 60;
  return endInMinutes - startInMinutes;
}

我不知道您希望在哪种情况下获得这种差异。以下代码会在更改

时发出警告

$(".ddl").change(function(){
   var $startDdl = $(this).closest("td").find(".ddl.start"),
       $endDdl = $(this).closest("td").find(".ddl.end"),
       diff = differenceInMinutes($startDdl, $endDdl);
   alert("Diff in minutes: " + diff)          
});

希望这会有所帮助。干杯

使用jQuery计算DropDownList Value之间的差异

1 个答案: