jQuery clone tablerow and add datepicker

问题

With my very limited knowledge of both jQuery and JS i made a small script (with the help of Nicola Peluchetti) that duplicates a tablerow when a button is clicked. This works like a charm, however, i would like to add a datepicker to it. This also works well, but just once and not on the copied fields or visa versa. It's probably because the datepicker "thinks" there is just one field.

I found several sources to solve the problem, but again, with my newbie knowledge, it's just to hard. I am playing with this for almost two days and can't get it solved.

<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>

Potential solutions that i don't get:

http://www.stemkoski.com/problem-with-jquery-ui-datepicker-dynamic-dom/
duplicating jQuery datepicker
Dynamic JQuery date picker code

Datepickerplugin:

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

Could anyone please help me out?

回答1:

one solution is to destroy the datepickers and rebuild them after adding different ids to them. I changed your code a little:

<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'
            });
        });

    }

});

fiddle here http://jsfiddle.net/nicolapeluchetti/87QCx/1/

Edit - if you need to attach the row after all the others:you must change

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

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

回答2:

This might be a little late, but all the suggestions above didn't work for me, I came up with an easy solution for this.

First, what is causing the problem: JQuery assign datepicker to element id. if you are cloning element, then same id might be cloned as well. which jQuery doesn't like. You might end up with either receiving null reference error or the date being assigned to first input field regardless which input field you click on.

Solution:

1) destroy datepicker 2) assign new unique ids to all input field 3) assign datepicker for each input

Make sure your input is something like this

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

Before you clone, destroy datepicker

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

After you clone, add these lines as well

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

and the magic happens

来源：https://stackoverflow.com/questions/8399631/jquery-clone-tablerow-and-add-datepicker

标签

jquery

datepicker

duplicates

clone