jquery - 如何使用 jQuery 克隆带有日期选择器的表行

Question

我也遇到了类似的问题。我能够克隆该行并且日期选择器适用于焦点事件，但该按钮始终指向被克隆的初始行。我已经尝试过“.removeClass('hasDatepicker')”，这就是使日期选择器能够被克隆的原因。有谁知道为什么按钮仍然不起作用？

这是我的代码:

$(document).ready(function () {
    $(function () {
        $('#addNew').click(function () {
            var tbody = $('#entries tbody');
            var rows = tbody.find('tr').length;
            var newRow = tbody.find('tr:first').clone(true).appendTo(tbody);
            newRow.find(':input').val('').each(function () {
                var id = this.id
                if (id) {
                    this.id = this.id.split('_')[0] + '_' + rows;
                }
            }).end().find('.datepicker').removeClass('hasDatepicker').datepicker();
        });
        $('.datepicker').datepicker({
            autoSize: true,
            changeMonth: true,
            changeYear: true,
            gotoCurrent: true,
            showOn: 'both',
            buttonImage: '@Url.Content("~/Content/calendar.png")',
            buttonText: 'Choose Treatment Date',
            NextText: 'Next',
            prevText: 'Previous',
            showButtonPanel: true
        });
    });
});

<fieldset>
    <h4>Procedures</h4>
    <table id="entries" border="1">
        <tbody>
            <tr>
                <td>
                    Date of Service
                    <br />
                    <input type="text" id="DateOfService" class="datepicker" />
                </td>
                <td>
                    Procedure Code
                    <br />
                    <input type="text" id="ProcedureCode" />
                    <br />
                    <a href="#" id="procedureLookup">Lookup</a>
                </td>
                <td>
                    Description
                    <br />
                    <input type="text" id="ProcedureCodeDescription" />
                </td>
                <td>
                    <div id="hasToothAndSurface">
                        Tooth
                        <br />
                        <input type="text" id="Tooth" />
                        <br />
                        Surface
                        <br />
                        <input type="text" id="Surface"/>
                    </div>
                    <div id="NoToothSurface" style="display:none">
                        <label for="txtNoToothSurface">Tooth/Surface</label>
                        N/A
                    </div>
                    <br />
                    <a href="#" id="toothSurfaceLookup">Lookup</a>
                </td>
                <td>
                    Fee $
                    <br />
                    <input type="text" id="ProcedureFee" />
                </td>
                <td><button type="button" id="deleteRow" class="remove">Remove</button></td>
            </tr>
        </tbody>
    </table>
    <button type="button" id="addNew">Add Procedure</button>
</fieldset>

我愿意接受任何建议。我需要用户能够添加 n 条记录，然后将它们发布到我的 asp.net Controller ，以便我可以处理它们。我正在考虑将输入的名称更改为:

<input type="text" name="in_dateofService[]" />
<input type="text" name="in_code[]" class="my_date" />
<input type="text" name="in_tooth[]" />
<input type="text" name="in_surface[]" />
<input type="text" name="in_fee[]" />

看起来我可以在帖子上将它们作为数组处理。对吗？

Answer 1

您需要做几件事。首先，在克隆行之前分离日期选择器字段(即在点击处理程序中)。然后在克隆该行后重新初始化它们。现在，您只在页面首次加载时初始化 ready() 处理程序中的第一个，但新克隆的行也需要初始化。

我认为在克隆之前需要分离日期选择器对象，否则当您尝试初始化新克隆的行时，插件认为它已经被初始化并中止。此外，如果您不首先分离它们，有时您最终会在日期选择器输入字段旁边看到多个按钮或图像。

$(document).ready(function () {
    $('#addNew').click(function () {
        // Detach all datepickers before cloning.
        $('.datepicker').datepicker('destroy');

        var tbody = $('#entries tbody');
        var rows = tbody.find('tr').length;
        var newRow = tbody.find('tr:first').clone(true).appendTo(tbody);
        newRow.find(':input').val('').each(function () {
             var id = this.id
             if (id) {
                  this.id = this.id.split('_')[0] + '_' + rows;
             }
        })

        // Reattach all datepickers after cloning.
        $('.datepicker').datepicker({
                autoSize: true,
                changeMonth: true,
                changeYear: true,
                gotoCurrent: true,
                showOn: 'both',
                buttonImage: '@Url.Content("~/Content/calendar.png")',
                buttonText: 'Choose Treatment Date',
                NextText: 'Next',
                prevText: 'Previous',
                showButtonPanel: true
        });
    });

    // Initial datepicker setup on page load.
    $('.datepicker').datepicker({
            autoSize: true,
            changeMonth: true,
            changeYear: true,
            gotoCurrent: true,
            showOn: 'both',
            buttonImage: '@Url.Content("~/Content/calendar.png")',
            buttonText: 'Choose Treatment Date',
            NextText: 'Next',
            prevText: 'Previous',
            showButtonPanel: true
    });
});