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

Question

我有 3 个通过 jQuery 中的 clone() 动态创建的字段，并希望从可用小时数中减去小时数。为了帮助我解释，请考虑这张图片：

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

这是我的 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 之美的一部分。

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