0

こんにちは、入力要素にタイムピッカー機能を使用するページにテーブルを作成しました。以下の関数を使用して、テーブルの最後の行に到達するたびにテーブルに新しい行を追加しています。

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

これは正常に機能し、jquery timepicker をテーブルに次のように追加しました。

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

ページ内の私のテーブルは次のとおりです。

<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>

ここで、テーブルに新しく追加された行に Jquery Timepicker 機能を動的に追加する必要があります。どんな助けでも大歓迎です....事前に感謝します....

4

1 に答える 1

0

フィールドを「datefield」のクラスを持つように設定し（または、さらに良いことに、入力タイプ「date」の使用を開始します）、次のようにします。

$(document).on("load", ".datefield", function(e){
    $(this).timepicker();
});
于 2012-06-10T06:58:51.883 に答える