Question

我在jQuery中通过clone（）有3个动态创建的字段，并希望从总体可用小时数中减去小时数。为了帮助我解释一下，请考虑以下图片：

第一个日期是动态设置的（但可以更改）。在右上角，我们有总的可用时间。我需要的是计算在下面的字段中设置的小时数（全部动态创建，可以添加或消除更多）并从可用小时数中减去。我还需要考虑每个时间段与最后一个时间段不重叠。例如，设置下一个日期时，它不能等于上面的日期作为时间间隔匹配。

这是我的HTML代码：

<table id="days" class="table table-hover">
    <thead>
        <tr><th>Dia</th><th>Hora Início</th><th>Hora Término</th><th></th></tr>
    </thead>
    <tbody>
       <tr id="days0" class="hidden" data-id="0" ><td data-name="day"><input type="text" name="day0" class="input-block-level datepicker-days"> </td><td data-name="start"><input type="time" name="start0"></td><td data-name="end"><input type="time" name="end0"></td><td data-name="del"><button type="button" name="del0" class="btn btn-xs btn-danger row-remove"><icon class="fa fa-remove"></icon></button></td></tr>
    </tbody>
</table>
<button type="button" class="btn btn-xs" id="add_row"><i class="icon fa fa-plus"></i></button>

到目前为止我的JQuery：

$("#add_row").on("click", function() {
    var newid = 0;
    $.each($("#days tr"), function() {
        if (parseInt($(this).data("id")) > newid) {
            newid = parseInt($(this).data("id"));
        }
    });
    newid++;

    var tr = $("<tr></tr>", {
        id: "days"+newid,
        "data-id": newid
    });

    $.each($("#days tbody tr:nth(0) td"), function() {
        var cur_td = $(this);
        var children = cur_td.children();
        console.log($(this).data("name"));
        // add new td and element if it has a nane
        if ($(this).data("name") != undefined) {
            var td = $("<td></td>", {
                "data-name": $(cur_td).data("name")
            });
            console.log(children);
            $.each(children, function(index, childElement){
             var c = $(childElement).clone();
            c.attr("name", $(cur_td).data("name") + newid);
                if(c.attr("type")=='text'){
                    c.attr("class", "datepicker-days");
                }

                if(c.attr("name")=='start'+newid){
                    c.attr("value", "09:00");
                }

                if(c.attr("name")=='end'+newid){
                    c.attr("value", "18:00");
                }
            c.appendTo($(td));
            });

            td.appendTo($(tr));
        } else {
            var td = $("<td></td>", {
                'text': $('#days tr').length
            }).appendTo($(tr));
        }
    });

    // add the new row
    $(tr).appendTo($('#days'));

    if(newid==1){
        // If is first clone, set Date and remove datepicker class
        $("input[name=day1]").prop('readonly', true);
         $("input[name=day1]").val($("input[name=data_inicio]").val());

        $("input[name=day1]").removeClass("datepicker-days");
        $("input[name=start1]").val('09:00');
        $("input[name=end1]").val('18:00');
    }


    $(tr).find("td button.row-remove").on("click", function() {
         $(this).closest("tr").remove();
    });

在这个阶段，我很失落。我知道逻辑，但不知道如何到达那里。如果我没有清楚自己，我很抱歉。谢谢。

Answer 1

您是否考虑过使用其他jquery选择器？例如，假设你想要总计几个小时，并且为了帮助你，你可以给所有小时盒子提供一个“小时”课程。现在，使用jquery，您可以使用选择器$（'。hours'）来选择所有小时类字段。然后从那里，你可以把它们全部加起来。使用这种方法，您可以对类中的每个项运行操作，而无需考虑可能存在多少项。

请参阅jquery sum of multiple input fields if same class in one input

中的解决方案

这种通过类或其他更复杂的方式获取内容以及处理对象集合的能力是jQuery之美的一部分。

那么，您可以使用此类更改元素，运行一个总计与该类匹配的所有元素的函数，并从需要完成的任何地方减去它们。

从动态创建的datepicker字段中减去日期和时间

1 个答案: