jQuery клонировать таблицу и добавить DatePicker - PullRequest
Новая
       23

jQuery клонировать таблицу и добавить DatePicker

1 голос
/ 06 декабря 2011

С моим очень ограниченным знанием как jQuery, так и JS я сделал небольшой скрипт (с помощью Никола Пелучетти), который дублирует таблицу при нажатии кнопки.Это работает как шарм, однако, я хотел бы добавить к нему указатель даты.Это также хорошо работает, но только один раз, а не на скопированных полях или наоборот.Это, вероятно, потому, что средство выбора даты «думает», что есть только одно поле.

Я нашел несколько источников, чтобы решить проблему, но опять же, с моим знанием новичка, это просто сложно.Я играю с этим в течение почти двух дней и не могу решить его. 

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

Потенциальные решения, которые я наденуне получается:

Datepickerplugin:

Может кто-нибудь, пожалуйста, помогите мне?

Ответы [ 2 ]

2 голосов
/ 06 декабря 2011

Одно из решений состоит в том, чтобы уничтожить средства выбора даты и восстановить их после добавления к ним различных идентификаторов.Я немного изменил ваш код: 

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

in 

        $(this).closest('table').append($tr);
0 голосов
/ 18 июня 2013

Это может быть немного поздно, но все вышеизложенные предложения не сработали для меня, я нашел простое решение для этого.

Во-первых, что вызывает проблему: JQuery назначает указатель даты идентификатору элемента. если вы клонируете элемент, то такой же идентификатор может быть также клонирован. который jQuery не любит. Вы можете получить либо ошибку нулевой ссылки, либо дату, назначенную первому полю ввода, независимо от того, в каком поле ввода вы щелкнете.

Решение:

1) уничтожить DatePicker 2) назначить новые уникальные идентификаторы для всех полей ввода 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++;
});

и происходит волшебство

...