0

time jquery ui datepickerを動的に追加する前にこれを読んでください? JQ datepicker UI に問題があり、新しい行を追加した後にスタイルが壊れます! 誰かが以前にこの問題を抱えていましたか。バグの詳細については、写真を参照してください。番号は日付ピッカー 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

この問題は次のことが原因です: jquery がその入力に追加した他の css クラスに tr を複製すると: 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によって追加された2番目のクラス：hasDatepickerを削除してから、datepickerをもう一度呼び出します：

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

このデモを試す

于 2012-09-02T13:09:40.993 に答える