2013-05-15 54 views
0

我试图在单击链接时添加一个新行。但jquery不运行。在jsfiddle上运行,但不添加新行。这里是jsfiddle。 add_field()添加了新的空输入,这在我的表单中是不可见的。Jquery DatePicker在单击时不起作用添加新行链接

<script type="text/javascript"> 
    function add_field(){ 
     var cont = document.getElementById('addhere'); // refer to the div 
     var numfields = cont.getElementsByTagName("input").length; // get number of input fields in the div 
      // create a div element 
      var div1 = document.createElement('div'); 
      // Get template data 
      div1.innerHTML = document.getElementById('fieldtpl').innerHTML; 
      // append to div, so that template data becomes part of document 
      document.getElementById('addhere').appendChild(div1); 
    } 

    $(".datepick").each(function() { 
     $(this).datepicker({ 
     changeMonth: true, 
     changeYear: true 
     }); 
    }); 
    </script> 

<form name="ExtendForm" id="ExtendForm" method="get" action=""> 
    <a href="javascript:void(0);" onClick="add_field();">Add new line</a> 
    <BR> 
    <div id="container1" style="position:fixed;"> 
     <div id="stid" style="float:left; width:200px;"> 
      Student ID 
     </div> 
     <div id="sdate" style="float:left; width:200px;"> 
      Start 
     </div> 
     <div id="fdate" style="float:left; width:200px;"> 
      Finish 
     </div> 
     <div id="addhere" style="float:relative; width:600px;"> 
      <div id="stid" style="float:left; width:200px;"> 
       <input type="text" name="studentid" id="studentid"> 
      </div> 
      <div id="sdate" style="float:left; width:200px;"> 
       <input name="start" class="datepick"> 
      </div> 
      <div id="fdate" style="float:left; width:200px;"> 
       <input name="finish" class="datepick"> 
      </div> 
     </div> 

     <div id="fieldtpl" style="display:none;"> 
      <div id="stid" style="float:left; width:200px;"> 
       <input type="text" name="studentid" id="studentid"> 
      </div> 
      <div id="sdate" style="float:left; width:200px;"> 
       <input name="start" class="datepick"> 
      </div> 
      <div id="fdate" style="float:left; width:200px;"> 
       <input name="finish" class="datepick"> 
      </div> 
     </div> 

     <div id="sbmt" style="width:600px; text-align:center"> 
      <input type="submit" name="saveForm" id="saveForm" value="Submit"> 
     </div> 
    </div> 
</form> 
+0

如果你不从的onload改变身体头部或NOWRAP到NOWRAP它工作正常 –

回答

0

使用此...

​​

看到这个DEMO

+0

谢谢,但第三行datepicker仍然不运行后。 – sdiri

+0

@sdiri再次看到这个例子...它的工作原理... xD –

+0

非常感谢你:) – sdiri

0

。它正在here.You需要选择身体的选项从左边side.I张贴在评论链接section.check一次

+0

参看H ere http://jsfiddle.net/AsrHk/1/ – PSR

+0

,但是当它添加新行datepicker仍然没有运行。 – sdiri

+0

我更新了链接http://jsfiddle.net/AsrHk/4/.see这里 – PSR