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

我在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();
    });

$（“添加行”）。在（“单击”，函数（）上）{
var-newid=0；
$。每个（$（“#天tr”），函数（）{
if（parseInt（$（this.data（“id”））>newid）{
newid=parseInt（$（this）.data（“id”）；
}
});
newid++；
var tr=$（“”{
id:“天”+新id，
“数据id”：newid
});
$。每个（$（“#天tbody tr:n（0）td”），函数（）{
var cur_td=$（本）；
var children=cur_td.children（）；
console.log（$（this.data（“name”））；
//添加新的td和元素（如果有nane）
if（$（this）.data（“name”）！=未定义）{
var td=$（“”{
“数据名称”：$（cur_td）.data（“名称”）
});
console.log（儿童）；
$.each（子项，函数（索引，子元素）{
var c=$（childElement.clone（）；
c、 属性（“名称”），$（cur_td）.data（“名称”）+newid）；
如果（c.attr（“类型”）==“文本”）{
c、 属性（“类”、“日期选择器日”）；
}
如果（c.attr（“name”）=='start'+newid）{
c、 属性（“值”，“09:00”）；
}
如果（c.attr（“name”）=='end'+newid）{
c、 属性（“值”，“18:00”）；
}
c、 附件(元);；
});
td.附件(元(tr);；
}否则{
var td=$（“”{
'文本'：$（'天tr'）。长度
})。附件（$（tr））；
}
});
//添加新行
美元(tr),附于("天");；
if（newid==1）{
//如果是第一个克隆，请设置日期并删除日期选择器类
$（“输入[name=day1]”）.prop（'readonly'，true）；
$（$（输入[name=day1]）.val（$（$（输入[name=data_inicio]）））.val（）；
$（“输入[name=day1]”）。removeClass（“日期选择器天数”）；
$（“输入[name=start1]”）val（'09:00'）；
$（“输入[name=end1]”）val（'18:00'）；
}
$（tr）.find（“td-button.row-remove”）.on（“单击”，函数（）{
$（this）.tr.remove（）；
});

对于这一阶段的前进，我完全迷失了方向。 我知道逻辑，但不知道如何到达那里。

---

如果我没有说清楚的话，我很抱歉。谢谢。

您考虑过使用其他jquery选择器吗？例如，假设您想计算总小时数，为了帮助实现这一点，您为所有小时框设置了一个“小时”类。现在，使用jquery，您可以使用选择器$（'.hours'）选择所有小时类字段。然后，您可以将它们相加。通过这种方法，您可以对类中的每个项目运行操作，而不必考虑可能存在的数量

请参阅中的解决方案

这种按类或以其他更复杂的方式抓取事物的能力，以及处理对象集合的能力是jQuery之美的一部分

---

因此，在使用此类更改元素时，您可以运行一个函数，对与此类匹配的所有元素进行合计，并从需要的位置减去这些元素。

您是否考虑过使用其他jquery选择器？例如，假设您希望合计小时数，并且为了帮助完成此操作，您为所有小时框指定了一个“小时”现在，使用jquery，您可以使用选择器$（'.hours'）选择所有小时类字段。然后，您可以从中对所有字段进行求和。使用这种方法，您可以对类中的每个项运行操作，而不必考虑可能存在多少项

请参阅中的解决方案

这种按类或以其他更复杂的方式抓取事物的能力，以及处理对象集合的能力是jQuery之美的一部分

---

因此，您可以在使用此类更改元素时，运行一个函数，将与此类匹配的所有元素相加，然后从需要执行的任何位置减去这些元素。

您尝试了什么吗？我在帖子中没有看到任何代码。请阅读此文：然后编辑您的question@MarcosPérezGude我用我现在的代码编辑了我的问题谢谢你的提醒。现在你有更多的机会接受帮助：）我将尝试阅读你的代码，看看如何帮助你。你尝试了什么吗？我在帖子中没有看到任何代码。请阅读以下内容：并编辑你的代码question@MarcosPérezGude我用我当前的代码编辑了我的问题。谢谢你的提醒。现在你有更多的机会获得帮助：）我将尝试阅读你的代码，看看如何帮助你问题是我必须从开始时间中减去结束时间，并知道每天有多少小时。他们将所有时间相加，然后从总时间中减去该时间。我还必须实时知道这一点，以便确保用户创建一个总小时数等于培训模块的时间表。问题是我必须减去结束时间从开始时间算起的时间，并知道每天有多少小时。他们将所有时间相加，然后从总时间中减去该时间。我还必须实时知道这一点，以便我可以确保用户创建一个总小时数等于培训模块的计划。