动态添加时间jquery ui datepicker？

Question

您好，我的动态表“时间表”确实需要一点帮助。我想将 datepicker 添加到动态提交的日期文本中吗？谁能帮帮我？当用户单击添加新行时，此代码将向表中添加新行？

  $(document).ready(function ($) {
    // trigger event when button is clicked
    $("button").click(function () {
        // add new row to table using addTableRow function
        addTableRow($("table"));

        // prevent button redirecting to new page
        return false;
    });

    // function to add a new row to a table by cloning the last row and
    // incrementing the name and id values by 1 to make them unique
    function addTableRow(table) {
        // clone the last row in the table
        var $tr = $(table).find("tbody tr:last").clone();

        // get the name attribute for the input and select fields
        $tr.find("input,select").attr("name", function () {
            // break the field name and it's number into two parts
            var parts = this.id.match(/(\D+)(\d+)$/);

            // create a unique name for the new field by incrementing
            // the number for the previous field by 1
            return parts[1] + ++parts[2];
            // repeat for id attributes
        }).attr("id", function () {
            var parts = this.id.match(/(\D+)(\d+)$/);
            return parts[1] + ++parts[2];
        });

        // append the new row to the table
        $(table).find("tbody tr:last").after($tr);
    };

});

  <table>
    <thead>
      <tr>
        <th scope="col">Date</th>
        <th scope="col">Start Time</th>
        <th scope="col">End Time</th>
        <th scope="col">Hour Type</th>

      </tr>
    </thead>


    <tbody>
      <tr>
        <td><input name="date1" id="date1"></td>
        <td><input name="startTime1" id="startTime1"></td>
         <td><input name="endTime1" id="EndTime1"></td>
        <td>
          <select name="hourType1" id="hourType1">
            <option value="">Please select</option>
            <option value="1">Regular</option>
            <option value="2">Overtime</option>
          </select>
        </td>
      </tr>
    </tbody>   
</table>   
<button>Add Row</button>

Answer 1

不要使用id，而是使用class：

HTML

<td><input name="date1" class="date"></td>

jQuery

$(".date").datepicker();

Answer 2

addTableRow($("table"));

在你完成之后。

$("table tr").last().find('input.date-field').datepicker({...});
//{} = datepicker settings.