0

我在报价构建页面中使用 jquery datepicker。每次单击以添加行时，该页面都会复制隐藏的表格行。

不幸的是，当您使用日期选择器（显示为 fiine）时，对于第 3 行和后续行，日期输入到第二行而不是所选行。

使用萤火虫我已经确定每个后续行的日期字段输入被赋予与第二行相同的 id。这是因为当我加载页面时，为每个“添加的行”克隆的模板行已经存在。

有没有人对我如何解决这个问题有任何指示。

查询：

$(document).ready(function(){
    refreshDatepickers();
    $('#additem').click(function(){
        addItem();
        refreshDatepickers();
        return false;
    });


function addItem(){
    var itemRow = $('#rowtemplate');
    var newRow = itemRow.clone().removeAttr('id');
    newRow.appendTo($('.newQuote tbody'));
    newRow.attr('id', 'item_'+(newRow.siblings().length+1));
    return false;
}

function refreshDatepickers(){
    var tobeDated = $('.datepicker');
    $.each(tobeDated, function(){
        $(this).removeClass('hasDatepicker').datepicker({dateFormat: "dd/mm/yy"});

    });
}

为每个新行重复的行的简化 html 如下： datepicker iinput 获取动态添加的这种 id（由我假设的 datepicker 插件） id="dp1358783794011"

 <div style="display:none;">
<table>
    <tr id="rowtemplate">
        <td><input type="text" class="qi-name" name="items[title][]"/></td>
        <td><textarea class="qi-desc" name="items[description][]"></textarea></td>
        <td><input type="text" class="qi-del datepicker" name="items[delivery][]"/></td>

        <td class="qi-act">
                <a href="#" class="actAs qi-apply"></a>
                <a href="#" class="qi-delete"></a>
        </td>
    </tr>
</table>

4

1 回答 1

1

建议在运行任何其他代码之前缓存您的行模板，然后在添加新行时添加缓存行的克隆

/* remove ".find(':input').val('').end()" if no data will be populated at run time*/
var cacheRow=$('#rowtemplate').clone().removeAttr('id').find(':input').val('').end();

/* run init code*/

function addItem(){    
    var newRow =cacheRow.clone();
    newRow.appendTo($('.newQuote tbody'));
    newRow.attr('id', 'item_'+(newRow.siblings().length+1));
    return false;
}
于 2013-01-21T16:29:40.393 回答