0

Hi i created a table in my page in which i used the timepicker functionality for the input elements, and using the below function i'm adding a new row in my table whenever i reach the last row in the table:

<script type="text/javascript">
    $(document).ready(function(){
    $("#myTable tr:last input").live("click",function(){
    $(this).parent().parent().clone().appendTo("#myTable");
    }); 
    }); 
   </script>

This works fine, and i added the jquery timepicker in my table as :

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/darkness/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<link href="../css/jquery.ui.timepicker.css" rel="stylesheet" />
<script src="../js/jquery.ui.timepicker.js"></script>
  <script>
  jQuery(function($){
    $('#element1').timepicker();
    $('#element2').timepicker();
    $('#element3').timepicker();
    $('#element4').timepicker();
});

and my table in the page is as :

<table id="myTable" class="timingtable" border="1" cellpadding="0" cellspacing="0" align="left" style="width:100%; height:170px;">
  <tr>
    <th>Start time</th>
    <th>End time</th>
    <th>Family</th>
  </tr>
  <tr>
    <td><input type="text" name="start" id="element1" value=""></td>
    <td><input type="text" name="end" id="element2" value="" ></td>
    <td><input type="text"/></td>
  </tr>
  <tr>
   <td><input type="text" name="start" id="element3" value=""></td>
    <td><input type="text" name="end" id="element4" value="" ></td>
    <td><input type="text"/></td>
  </tr>
</table>

Here I need to add the Jquery Timepicker functionality to the newly added rows in my table dynamically how can i do that ?? any help is much appreciated....thanks in advance....

Srinivas V.
  • 321
  • 6
  • 23

1 Answers1

0

Set the fields to have a class of 'datefield' (or even better, start using the input type 'date'), and then do:

$(document).on("load", ".datefield", function(e){
    $(this).timepicker();
});
Anthony
  • 36,459
  • 25
  • 97
  • 163