jQuery 克隆 tablerow 并添加 datepicker答案

【问题标题】：jQuery clone tablerow and add datepickerjQuery 克隆 tablerow 并添加 datepicker
【发布时间】：2011-12-06 12:08:08
【问题描述】：

由于我对 jQuery 和 JS 的了解非常有限，我制作了一个小脚本（在 Nicola Peluchetti 的帮助下），当单击按钮时会复制一个表格行。这就像一个魅力，但是，我想给它添加一个日期选择器。这也很有效，但只是一次，而不是在复制的字段上，反之亦然。这可能是因为日期选择器“认为”只有一个字段。

我找到了几个资源来解决这个问题，但同样，根据我的新手知识，这太难了。我玩了将近两天，无法解决。

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$("input[type='button'].AddRow").click(

function() {
var index = $(this).closest('tr').index();
if (index > 0) {
$(this).closest('tr').remove();
} else {
$(this).closest('tr').clone(true).prependTo($(this).closest('table'));
$(this).val(i++);
/* $('.startdatum').removeClass('hasDatepicker').datepicker({dateFormat: 'mm-dd-yy'});    */
 }

});
});//]]> 
</script>

HTML

<table width="960" border="0" align="center" cellpadding="10" cellspacing="0"     class="contentblock">
<tr>
<td width="140"><strong>Startdatum</strong></td>
<td><input name="startdatum[]" type="text" class="startdatum" value="dd/mm/jjjj" />
<script>
$(function() {
    $('.startdatum').removeClass('hasDatepicker').datepicker({
dateFormat: 'mm-dd-yy'
});
});
</script>
  <select name="locatie[]" id="locatie[]">
    <option value="" selected></option>
  </select></td>
  <td width="143"><strong>Dekking</strong></td>
  <td width="133"><select name="dekking[]" id="dekking[]">
  <option value="" selected></option>
  </select></td>
  <td width="145"><input type="Button" value="Add Row" class="AddRow"></td>
  </tr>
  </table>

我没有得到的潜在解决方案：

日期选择器插件：

http://jqueryui.com/demos/datepicker/

谁能帮帮我？

【问题讨论】：

标签： jquery datepicker duplicates clone

【解决方案1】：

一种解决方案是销毁日期选择器并在向它们添加不同的 id 后重建它们。我稍微修改了你的代码：

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all">
<table width="960" border="0" align="center" cellpadding="10" cellspacing="0"     class="contentblock">
<tr>
<td width="140"><strong>Startdatum</strong></td>
<td><input id='datePicker' name="startdatum[]" type="text" class="startdatum" value="dd/mm/jjjj" />
  <select name="locatie[]" id="locatie[]">
    <option value="" selected></option>
  </select></td>
  <td width="143"><strong>Dekking</strong></td>
  <td width="133"><select name="dekking[]" id="dekking[]">
  <option value="" selected></option>
  </select></td>
  <td width="145"><input type="Button" value="Add Row" class="AddRow"></td>
  </tr>
  </table>

<input type="hidden" value="0" id="counter">

$('.startdatum').removeClass('hasDatepicker').datepicker({
    dateFormat: 'mm-dd-yy'
});


$("input[type='button'].AddRow").live('click',
function() {
    var index = $(this).closest('tr').index();
    if (index > 0) {
        $(this).closest('tr').remove();
    } else {


        var $tr = $(this).closest('tr').clone(true);
        var $input = $tr.find('input.startdatum');
        var index = $('input#counter').val();
        var id = 'datepicker' + index;
        index++;
        $('input#counter').val(index);
        $input.attr('id', id).data('index', index);
        console.log(index);
        $tr.prependTo($(this).closest('table'));
        $('.startdatum').each(function() {
            $(this).datepicker('destroy');
            $(this).datepicker({
                dateFormat: 'mm-dd-yy'
            });
        });

    }

});

在这里摆弄http://jsfiddle.net/nicolapeluchetti/87QCx/1/

编辑 - 如果您需要在所有其他行之后附加该行：您必须更改

        $tr.prependTo($(this).closest('table'));

在

        $(this).closest('table').append($tr);

【讨论】：

谢谢尼古拉！还有一个问题，我保证不再打扰你了；）现在新行添加到第一行下方，是否也可以将其添加到表格的最底部？
工作得很好，非常感谢所有的工作！我想弄清楚自己的一件事是如何在>第一行添加删除按钮而不是添加按钮。它曾经在您的原始脚本中：$(this).val("DelRow");

【解决方案2】：

这可能有点晚了，但上面的所有建议都对我不起作用，我想出了一个简单的解决方案。

首先，是什么导致了问题： JQuery 将 datepicker 分配给元素 id。如果您正在克隆元素，那么同样的 id 也可能会被克隆。哪个 jQuery 不喜欢。无论您单击哪个输入字段，您最终都可能会收到空引用错误或分配给第一个输入字段的日期。

解决方案：

1) 销毁日期选择器 2）为所有输入字段分配新的唯一ID 3) 为每个输入分配日期选择器

确保您的输入是这样的

<input type="text" name="ndate[]" id="date1" class="n1datepicker">

在克隆之前，销毁日期选择器

$('.n1datepicker').datepicker('destroy');

克隆后，也添加这些行

var i = 0;
$('.n1datepicker').each(function () {
    $(this).attr("id",'date' + i).datepicker();
    i++;
});

奇迹发生了

【讨论】：