0

在动态添加时间 jquery ui datepicker之前阅读此内容？ 我有问题 JQ datepicker UI 添加新行后样式会中断！以前有没有人遇到过这个问题。有关数字来自 datepicker UI 的错误的更多详细信息，请参阅照片

在此处输入图像描述

 <form>
  <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" class="date"></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>
    </asp:Content>
</form>

        <script>
        $(document).ready(function($)
        {
        $(".date").datepicker();
            // 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);
            };
        });
        </script>       
    </body>
4

3 回答 3

2

这个问题是由于以下原因造成的：当您克隆您的 tr 时，jquery 添加到您的输入的另一个 css 类：hasdatepicker，您可以在页面的源代码上验证这一点，您会发现：

<input name="date1" id="date1" class="date hasDatepicker">

这在这里得到了很好的解释：

jQuery DatePicker 不适用于新添加的行

我建议你不要克隆你的 tr 而是用 jquery 添加 html 代码我认为你的代码可以更简化，告诉我你想要什么我可以帮助你

于 2012-09-02T12:51:10.220 回答
1

当输入元素的 ID 相同时，这是 Datepicker 脚本的标准行为。因此，我建议您分配唯一的 ID（例如带有随机数的 ID），因此不会发生冲突。

于 2012-09-19T07:28:49.520 回答
0

我向您提出一个简单的解决方案：单击按钮时，您将执行以下操作，您将删除 jquery 添加的第二个类：hasDatepicker，然后再次调用 datepicker：

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

试试这个演示

于 2012-09-02T13:09:40.993 回答