使用javascript使用开始时间和结束时间进行时间输入验证

我想使用JavaScript动态添加开始时间和结束时间：

代码如下：

HTML:

<table id="timeTable" style="border: 1px solid black">
  <tr>
    <td>
      <input type="text" placeholder="Enter Start Time" value="" id="vTime" class="vTime" />
    </td>
    <td>
      <input type="text" placeholder="Enter End Time" value="" id="vTime" class="vTime" />
    </td>
    <td>
      <input type="button" value="Delete" />
    </td>
  </tr>
</table>

$('#timeTable').on('click', 'input[type="button"]', function () {
  $(this).closest('tr').remove();
});

$('#add-more').click(function () {
  var vTime = $(".vTime:last-child").last().val();
  $('#myTable').append('<tr><td><input type="text" placeholder="Enter Start Time" class="vTime" /></td><td><input type="text" placeholder="Enter End Time" value="" id="vTime" class="vTime" /></td><td><input type="button" value="Delete" /></td></tr>');
});

JS:

<table id="timeTable" style="border: 1px solid black">
  <tr>
    <td>
      <input type="text" placeholder="Enter Start Time" value="" id="vTime" class="vTime" />
    </td>
    <td>
      <input type="text" placeholder="Enter End Time" value="" id="vTime" class="vTime" />
    </td>
    <td>
      <input type="button" value="Delete" />
    </td>
  </tr>
</table>

$('#timeTable').on('click', 'input[type="button"]', function () {
  $(this).closest('tr').remove();
});

$('#add-more').click(function () {
  var vTime = $(".vTime:last-child").last().val();
  $('#myTable').append('<tr><td><input type="text" placeholder="Enter Start Time" class="vTime" /></td><td><input type="text" placeholder="Enter End Time" value="" id="vTime" class="vTime" /></td><td><input type="button" value="Delete" /></td></tr>');
});

$（“#时间表”）。在（'click'，'input[type=“button”]”上，函数（）{
$（this）.closest（'tr'）.remove（）；
});
$（“#添加更多”）。单击（函数（）{
var vTime=$（“.vTime:last child”）.last（）.val（）；
$（'#myTable'）。追加（''）；
});

如果我第一次输入开始时间和结束时间，则结束时间不应小于开始时间，当我输入第二行开始时间和结束时间时，则不应小于上一次，以此类推

有人能帮忙吗

---

这里是jsFiddle:

我希望下面的代码片段对您有好处。阅读内联注释了解基本知识

$（'#myTable'）。在（'click'，'input[type=“button”]”上，函数（）{
$（this）.closest（'tr'）.remove（）；
});
$（“#添加更多”）。单击（函数（）{
//添加新的参赛表格
$（'#myTable'）。追加（''）；
});
$（“#提交”）。单击（函数（）{
$（'.t-row'）。每个（函数（i，obj）{
//获取第一次输入
var currentStartTimeValue=$（'#myTable.vTimeStart'）.eq（i）.val（）；
var currentEndTimeValue=$（'#myTable.vTimeEnd'）.eq（i）.val（）；
如果（i>0）{
//现在，我们有一个以前的输入要验证
//因此，我们检查有效性
var-previousIndex=i-1；
var lastEndTimeValue=$（'#myTable.vTimeEnd'）.eq（previousIndex.val（）；
if（currentStartTimeValue=currentEndTimeValue）{
$（this.css（'background-color'，'#ff0000'）；
$（this.attr（'title'，'Current StartTime必须小于Current EndTime！'）；
警报（“当前开始时间必须小于当前结束时间”）；
返回false；
} 
如果（i==$（'.t-row'）。长度-1）{
//循环中的最后一项。一切都好！
警惕（“一切正常！”）；
} 
}); 
}); 
函数clearError（el）{
//重置错误状态
$（el）.parent（）.closest（'tr'）.css（'background'，'#ffffffff'）；
$（el）.parent（）最近（'tr'）.attr（'title'，''）；
}

开始时间
结束时间

我希望下面的代码片段对您有好处。阅读内联注释了解基本知识

$（'#myTable'）。在（'click'，'input[type=“button”]”上，函数（）{
$（this）.closest（'tr'）.remove（）；
});
$（“#添加更多”）。单击（函数（）{
//添加新的参赛表格
$（'#myTable'）。追加（''）；
});
$（“#提交”）。单击（函数（）{
$（'.t-row'）。每个（函数（i，obj）{
//获取第一次输入
var currentStartTimeValue=$（'#myTable.vTimeStart'）.eq（i）.val（）；
var currentEndTimeValue=$（'#myTable.vTimeEnd'）.eq（i）.val（）；
如果（i>0）{
//现在，我们有一个以前的输入要验证
//因此，我们检查有效性
var-previousIndex=i-1；
var lastEndTimeValue=$（'#myTable.vTimeEnd'）.eq（previousIndex.val（）；
if（currentStartTimeValue=currentEndTimeValue）{
$（this.css（'background-color'，'#ff0000'）；
$（this.attr（'title'，'Current StartTime必须小于Current EndTime！'）；
警报（“当前开始时间必须小于当前结束时间”）；
返回false；
} 
如果（i==$（'.t-row'）。长度-1）{
//循环中的最后一项。一切都好！
警惕（“一切正常！”）；
} 
}); 
}); 
函数clearError（el）{
//重置错误状态
$（el）.parent（）.closest（'tr'）.css（'background'，'#ffffffff'）；
$（el）.parent（）最近（'tr'）.attr（'title'，''）；
}

开始时间
结束时间

您的时间格式是什么？到目前为止，您在验证方面做了哪些尝试？@nidhin:MM@Andreas我得到了最后一次输入的时间，但不知道该怎么办..为什么没有时间选择器或键入时间？或者您真的希望用户输入时间？您的时间格式是什么？到目前为止，您在验证方面做了哪些尝试？@nidhin:MM@Andreas我得到了最后一次输入的时间，但不知道该怎么办..为什么没有时间选择器或键入时间？或者您真的希望用户输入时间吗？我看不到AM PM选项。。它以前就在那里。我希望在

Submit

按钮上进行验证，而不是在

addmore

按钮上。意味着首先让他们输入所有数据，然后在

Submit

上进行验证。怎么做？你能帮忙吗？谢谢。但它有时显示AM/PM，有时不显示。我看不到AM/PM选项。。它以前就在那里。我希望在

Submit

按钮上进行验证，而不是在

addmore

按钮上。意味着首先让他们输入所有数据，然后在

Submit

上进行验证。怎么做？你能帮忙吗？谢谢。但它有时显示AM/PM，有时不显示。