如何将datepicker附加到具有相同ID的表的每一行？

Question

I have a JavaScript function to attach the date picker to each row data of the table and row is dynamically created and uses this date picker function to attached to the field.But the problem is if I created additional row to the table its is attaching the date picker but in that additional row that datepicker is not working its look like disable state. 我有一个JavaScript函数将日期选择器附加到表的每个行数据，并且动态创建行并使用此日期选择器函数附加到字段。但问题是如果我创建了附加行到表，它附加了日期选择器，但在该额外的行中，datepicker不工作，它看起来像禁用状态。

 <script> $(document).ready(function() { $("input.add").live('click', function() { var $tr = $(this).closest('tr'); var $clone = $tr.clone(); $clone.find(':text').val(''); $clone.find(':checkbox:checked').prop('checked', false).val('N'); $tr.after($clone); }); $("input.delete").live('click', function() { var rowCount = document.getElementById('phone').getElementsByTagName("tr").length; if (rowCount != 3) { var $tr = $(this).closest('tr'); $tr.remove(); return false; } }); }); $(function() { $("#dob").datepicker({ //showOn: both - datepicker will appear clicking the input box as well as the calendar icon //showOn: button - datepicker will appear only on clicking the calendar icon showOn: 'button', //you can use your local path also eg. buttonImage: 'images/x_office_calendar.png' buttonImage: 'file:///C:/Users/27983/Desktop/calender.jpg', buttonImageOnly: true, changeMonth: true, changeYear: true, duration: 'fast', dateFormat: 'dd-mm-yy' }); }); </script>

  <style> #ui-datepicker-div { font-size: 12px; } #datepicker {} </style>

  <body> <form name="Basicinfo" id="Basicinfo" method="post" action="Basic.html"> <!-- Start Header --> <table id="phone" width="100%" name="phone"> <tr> <td colspan="5" bgcolor="#5C85B3">Phone</td> </tr> <tr> <th>Type</td> <th>Date</th> <th>*Phone</th> <th>Preferred</th> <th>Add/Delete</th> </tr> <tr> <td> <select name="phntype" id="phntype" style="width:50%"></select> </td> <td> <input id="dob" name="dob" type="text" value=""> </td> <td> <input type="text" name="phone_no" id="phone_no" value=""> </td> <td> <input type="hidden" name="prefferd" value="NO"> <input type="checkbox" name="preferred" id="preferred" value="N" onchange="changeCheckBox();"> </td> <td> <input type="button" value="+" class="add"> <input type="button" value="-" class="delete"> </td> </tr> </table> </form> </body>

Answer 1

You know, the id attribute should be unique. 你知道，id属性应该是唯一的。 You are better off setting a class: 你最好设置一个班级：

<input class="datePickerInput" name="dob" type="text" value="">

and then selecting it by class rather than by id: 然后按类而不是id选择它：

$(".datePickerInput").datepicker({

Answer 2

Try this... 尝试这个...

 <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

 $(function() {
   $('input').filter('.datepicker').datepicker({
    changeMonth: true,
    changeYear: true,
    showOn: 'button',
    buttonImage: 'jquery/images/calendar.gif',
    buttonImageOnly: true
   });
  });      

  <p>Date1 <input  class="datepicker" type="text" readonly="true"></p>
 <p>Date2<input class="datepicker" type="text" readonly="true"></p>
 <p>Date3<input  class="datepicker" type="text" readonly="true"></p>

Answer 3

Try this: 尝试这个：

$(document).ready(function(){
                var count = 0;
                $(".add").on("click",function(){
                    count = count+1;
                    var curid = 'date'+count;
                    var $tr = $(this).closest('tr');
                    var $clone = $tr.clone();
                    $clone.find(':text').val('');
                    $clone.find('.date').attr('id',curid).attr('class','date').datepicker();
                    $clone.find(':checkbox:checked').prop('checked', false).val('N');
                    $tr.after($clone);
                });
                $(".date").datepicker();
            });

<table  id="phone" width="100%" name="phone">
            <tr>
                <td colspan="5" bgcolor="#5C85B3">Phone</td>
            </tr>
            <tr>
                <th>Type</td>
                <th>Date</th>
                <th>*Phone</th>
                <th>Preferred</th>
                <th>Add/Delete</th>
            </tr>
            <tr>
                <td>
                    <select name="phntype" id="phntype" style="width:50%"></select>
                </td>
                <td>
                    <input class="date" id="dob" name="dob" type="text" value="" />
                </td>
                <td>
                    <input type="text" name="phone_no" id="phone_no" value="" />
                </td>
                <td>
                    <input type="hidden" name="prefferd" value="NO" />
                    <input type="checkbox" name="preferred" id="preferred" value="N" onchange ="changeCheckBox();" />
                </td>
                <td>
                    <input type="button" value="+" class="add" />
                    <input type="button" value="-" class="delete" />
                </td>
            </tr>
        </table>

Just added a class to the dynamically added date input field and binded the datepicker to it. 刚刚在动态添加的日期输入字段中添加了一个类，并将datepicker绑定到它。

fiddle 小提琴

如何将datepicker附加到具有相同ID的表的每一行？

问题描述

3 个解决方案

解决方案1
3 2015-05-13 06:40:48

解决方案2
0 2015-05-13 06:46:42

解决方案3
0 2015-05-13 07:07:29

如何将datepicker附加到具有相同ID的表的每一行？

问题描述

3 个解决方案

解决方案1 3 2015-05-13 06:40:48

解决方案2 0 2015-05-13 06:46:42

解决方案3 0 2015-05-13 07:07:29

解决方案1
3 2015-05-13 06:40:48

解决方案2
0 2015-05-13 06:46:42

解决方案3
0 2015-05-13 07:07:29