javascript - 动态添加和删除时间选择器到输入字段

Question

我正在使用时间选择器选择间隔为 15 分钟的时间。我使用来自 this link 的时间选择器.

我无法使用 onclick 函数将时间选择器添加到输入文本字段。这是我想要实现的一些示例代码。请帮我解决这个问题。

index.html

<link rel="stylesheet" href="include/jquery-ui-1.8.14.custom.css" type="text/css" />
<link rel="stylesheet" href="jquery.ui.timepicker.css?v=0.3.0" type="text/css" />
<script type="text/javascript" src="include/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="include/jquery.ui.core.min.js"></script>
<script type="text/javascript" src="jquery.ui.timepicker.js?v=0.3.0"></script>
<style type="text/css">
  .st{}
  .et{}
  #bod { font-size: small; margin:0px 0px 0px 0px; }
  body{font-size:10px;}
  ......
  <div id="bod">
    <input type="text"  id="timepicker_start1" value="" class="st"/>
    <input type="text"  id="timepicker_end1" value=""  class="et"/>
  </div>
  <input type="button" id="Add" name="Add" value="Add" onClick="add()" />
  <input type="hidden" id="tot" name="tot" value="1"/>
  ...

页面的javascript部分是:

<script type="text/javascript">
  function add(){
    var tot=document.getElementById("tot").value;
    tot=parseInt(tot,10);
    var i=tot+1;
    $('#bod').append(i+".   ");
    var s=$('<input/>').attr({type:'text',id:'timepicker_start'+i}).addClass('st').appendTo("#bod");
    var s1=$('<input/>').attr({type:'text',id:'timepicker_end'+i}).addClass('et').appendTo("#bod");
    $('#bod').append("  ");
    $('#timepicker_start'+i).timpicker({showLeadingZero: true, defaultTime: '', minutes:{interval:15}});
    $('#timepicker_end'+i).timpicker({showLeadingZero: true, defaultTime: '', minutes:{interval:15}});
    document.getElementById("tot").value=i;
  }
  $(document).ready(function(e) {
    $('#timepicker_start1').timpicker({showLeadingZero: true, defaultTime: '', minutes:{interval:15}});
    $('#timepicker_end1').timpicker({showLeadingZero: true, defaultTime: '', minutes:{interval:15}});
  });
</script>

Answer 1

您输入错误:它是 timepicker 而不是 timpicker。 除此之外，你还不错 - 脚本正在运行 - http://jsfiddle.net/FNww8/