Question

我有一个JavaScript函数将日期选择器附加到表的每个行数据，并且动态创建行并使用此日期选择器函数附加到字段。但问题是如果我向表创建了额外的行正在附加日期选择器，但在该额外行中，datepicker不工作，看起来像禁用状态。

[Theory]
[InlineData(typeof(BaseClass))]
[InlineData(typeof(DerivedClass))]
public void Test_Stuff(Type type/*BaseClass obj*/)
{
    var obj = Activator.CreateInstance(type) as BaseClass;
    CheckConstrain(obj);
}


[Theory]
[MemberData("GetObjects")]
public void Test_Stuff2(BaseClass obj)
{
    CheckConstrain(obj);
}

public static IEnumerable<object[]> GetObjects
{
    get
    {
       return new[] 
       {
        new object[] { new BaseClass() },
        new object[] { new DerivedClass() }
       };
    }
}

private static void CheckConstrain(BaseClass baseClass)
{
    Assert.True(baseClass.Foo() <= 1);
}

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

Answer 1

你知道，id属性应该是唯一的。你最好设置一个班级：

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

然后按类而不是id：

选择它

$(".datePickerInput").datepicker({

Answer 2

试试这个......

 <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

试试这个：

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

刚刚在动态添加的日期输入字段中添加了一个类，并将datepicker绑定到该字段。

fiddle

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

3 个答案: