0

テーブルの行があります。いくつかの入力フィールドが含まれています。phpコードによって入力される選択入力フィールドもあります。これが、この問題でjquerycloneを使用しようとしている理由です。ここでの例では、datepickerを機能させたいだけなので、select入力タイプは含めません。以下は私のテーブルです。

<input type="button" id="addButton" value="Press to Add">
<table border="1" id="displayData">
  <tr id="addNew" style="display:none;">
    <td colspan='2'><input type='text' name='textTest[]'/></td>
<td><input type="text" name="date[]" class="datePickTest" readonly/></td>
  </tr>
</table>

これが私のjqueryコードです。

$(function(){
    $("#addButton").click(function(){                  
                 $("#addNew").clone()     
                 .removeAttr('id').show().insertAfter($("#displayData tr:first"));

                 $(".datePickTest").datepicker(

                {   changeYear: true ,
            changeMonth: true ,
            dateFormat: "dd-M-yy",
          //year selection limit to date before today till 1900
        //  yearRange: "1900:" + new Date().getFullYear(),
        //  maxDate :  new Date()
        }); 

            });
     });

このコードは機能しません。だから私は試してみます

 $("#addNew").clone(true).removeAttr('id').show()
 .insertAfter($("#displayData tr:first"));

しかし、これは複製してdatepickerでバインドしましたが、日付を選択すると、複製された入力をクリックしても、静的行のみが値を取得します。

私は実際にこのようなものが欲しいでしょう..しかしクローンを使用しています。

var newRow = '<tr><td colspan="3">date: <input type="text" name="date[]" class="datePickTest" readonly/></td></tr>';
$("#displayData tr:first").after($(newRow));

$(".datePickTest").datepicker(
  { changeYear: true ,
    changeMonth: true ,
    dateFormat: "dd-M-yy"
});
4

1 に答える 1

1

要素のクローンを作成するときに、クラス名datePickTestを割り当てる必要があります。datepicker関数を呼び出すときに、非表示の行のクラス名自体が変更されるためです。

html

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<input type="button" id="addButton" value="Press to Add">
<table border="1" id="displayData">
  <tr id="addNew" style="display:none;">
    <td>Date: <input type="text" name="date[]" readonly/></td>
  </tr>
</table>

jquery

$(function(){
    $("#addButton").click(function(){
        tr = $("#addNew").clone().removeAttr('id').show()
        tr.find('input[type="text"]').addClass("datePickTest");
        tr.insertAfter($("#displayData tr:first"));
         $(".datePickTest").datepicker(
             {   changeYear: true ,
                changeMonth: true ,
                dateFormat: "dd-M-yy",
        });

    });
});

FIDDLEを確認してください

于 2012-12-11T11:41:22.560 に答える