0

我有一个表格行。其中包含一些输入字段。还有一个由 php 代码填充的选择输入字段。这就是为什么我试图在这个问题中使用jquery 克隆。对于此处的示例，我将不包括选择输入类型，因为我只想让 datepicker 工作。下面是我的桌子。

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