Question

我有一排桌子。其中包含一些输入字段。还有一个选择输入字段，由php代码填充。这就是我在这个问题上尝试使用 jquery clone 的原因。对于这里的例子，我不会包含选择输入类型，因为我想让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"
});

Answer 1

克隆元素时必须确定classname datePickTest。因为在调用datepicker函数时，它会更改隐藏的行classname本身。

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

jquery绑定datepicker和clone表行

1 个答案: