Question

每次点击ADD NEW时，我都会有一个显示新行的表格。第一行在输入字段旁边有日历图像，每次我们点击日历图像时都会显示日历框。问题是：在我们点击添加新行后，会显示日历图像，但当我们点击它时，日历框不会显示。如何在点击“添加新内容”后显示显示行的日历框？

 $(function() {
        $("#datearrive").datepicker({ dateFormat: "dd-mm-yy",
                showOn: "button",
                buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
               buttonImageOnly: true,
               buttonText: "Select date"

        }).val()

  $("#datearrive").click(function() {

            date = new Date();
            date.setDate(date.getDate()-1);
            $( "#datearrive" ).datepicker( "setDate" , date);

    }); 

});
 $(function() {
        $("#datedepart").datepicker({ dateFormat: "dd-mm-yy",
                showOn: "button",
                buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
               buttonImageOnly: true,
               buttonText: "Select date"

        }).val()

  $("#datedepart").click(function() {

            date = new Date();
            date.setDate(date.getDate()-1);
            $( "#datedepart" ).datepicker( "setDate" , date);

    }); 

});
 <table id="maintable">
        <tr>
            <th align="center">Arrived Date</th>
            <th align="center">Departed Date</th>
            <th align="center">Last Name</th>
        </tr>
        <tr id="rows">
            <div style="padding-left: 5px">
                <td style="padding:5px;">
                    <input type="text" name="rollno" id="datearrive" />
                </td>
                <td style="padding:5px;">
                    <input type="text" name="firstname" id="datedepart" />
                </td>
                <td style="padding:5px;">
                    <input type="text" name="lastname" />
                </td>
            </div>
        </tr>
    </table>
        <br>
        <div id="add_new">ADD NEW</div>
 $("#add_new").click(function () { 

$("#maintable").each(function () {

    var tds = '<tr>';
    jQuery.each($('tr:last td', this), function () {
        tds += '<td>' + $(this).html() + '</td>';
    });
    tds += '</tr>';
    if ($('tbody', this).length > 0) {
        $('tbody', this).append(tds);
    } else {
        $(this).append(tds);
    }
});

}）;

Answer 1

答案前的几点： -

您生成的行将具有相同的ID，我很确定您知道Id必须是唯一的，因此请先将其更改为类;
对于动态生成的元素，您必须将它们绑定到任何函数才能处理它们。使用jquery方法“on”进行此调用。
我已经用on编写了以下代码并将id更改为类，日历将显示但相应的到达和离开日期的所有值都是相同的，为了克服这一点，我建议生成ID无论如何这里带有类和“on”方法的代码。

 <script>
 $(function() {
       $('body').on('focus',"input.datearrive", function(){
          $(".datearrive").datepicker({ dateFormat: "dd-mm-yy",
                showOn: "button",
                buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
               buttonImageOnly: true,
               buttonText: "Select date"

        }).val()
      });


  $("body").on('click','input.datearrive',function() {

            date = new Date();
            date.setDate(date.getDate()-1);
            $( ".datearrive" ).datepicker( "setDate" , date);

    }); 

});
 $(function() {
      $('body').on('focus',"input.datedepart", function(){
          $(".datedepart").datepicker({ dateFormat: "dd-mm-yy",
                  showOn: "button",
                  buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
                 buttonImageOnly: true,
                 buttonText: "Select date"

          }).val()
      });

  $("body").on('click','input.datedepart',function() {

            date = new Date();
            date.setDate(date.getDate()-1);
            $( ".datedepart" ).datepicker( "setDate" , date);

    }); 

});
</script>
 <table id="maintable">
        <tr>
            <th align="center">Arrived Date</th>
            <th align="center">Departed Date</th>
            <th align="center">Last Name</th>
        </tr>
        <tr id="rows">
            <div style="padding-left: 5px">
                <td style="padding:5px;">
                    <input type="text" name="rollno" class="datearrive" />
                </td>
                <td style="padding:5px;">
                    <input type="text" name="firstname" class="datedepart" />
                </td>
                <td style="padding:5px;">
                    <input type="text" name="lastname" />
                </td>
            </div>
        </tr>
    </table>
        <br>
        <div id="add_new">ADD NEW</div>
      <script>
 $("#add_new").click(function () { 

$("#maintable").each(function () {

    var tds = '<tr>';
    jQuery.each($('tr:last td', this), function () {
        tds += '<td>' + $(this).html() + '</td>';
    });
    tds += '</tr>';
    if ($('tbody', this).length > 0) {
        $('tbody', this).append(tds);
    } else {
        $(this).append(tds);
    }
});
});
</script>

在添加的行中显示日历

1 个答案: