jQuery clone tablerow并添加datepicker [英] jQuery clone tablerow and add datepicker

问题描述

由于我非常有限的jQuery和JS的知识，我制作了一个小脚本（在Nicola Peluchetti的帮助下），当点击一个按钮时，它会复制一个tablerow。这样做就像一个魅力，但是，我想添加一个日期戳。这也很好，但只是一次，而不是复制的领域，反之亦然。这可能是因为datepicker认为只有一个字段。

我发现了几个来源来解决问题，但是再次，我的新手知识只是为了硬。我正在玩这个近两天，不能解决。

 < script type ='text / javascript '> //<！[CDATA [
 $（window）.load（function（）{
 $（input [type ='button']。AddRow）。 
 $ b function（）{
 var index = $（this）.closest（'tr'）。index（）; 
 if（index> 0）{
 $ （this）.closest（'tr'）。remove（）; 
} else {
 $（this）.closest（'tr'）。clone（true）.prependTo（$（this）最近（'table'））; 
 $（this）.val（i ++）; 
 / * $（'。startdatum'）removeClass（'hasDatepicker'）。datepicker（{dateFormat：'mm -dd-yy'}）; * / 
} 
 
}）; 
}）; //]]> 
< / script> 
  

HTML

 < table width =960border =0align =centercellpadding =10cellspacing =0class =contentblock> 
< tr> 
< td width =140>< strong> Startdatum< / strong>< / td> 
< td>< input name =startdatum []type =textclass =startdatumvalue =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 =Buttonvalue =Add Rowclass =AddRow>< / td> 
< / tr> 
< / table> 
  

我无法获得的潜在解决方案：

• http://www.stemkoski.com/problem-with-jquery-ui-datepicker-dynamic-dom/


• 复制jquery datepicker


• 动态JQuery日期选择器代码

Datepickerplugin：

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

有人可以帮我吗？ / p>

解决方案

一个解决方案是在添加不同的ID后，摧毁日期检查器并重建它们。我改变了你的代码：

 < link rel =stylesheethref =http：//ajax.googleapis。 com / ajax / libs / jqueryui / 1.8.16 / themes / base / jquery-ui.csstype =text / cssmedia =all> 
< table width =960border =0align =centercellpadding =10cellspacing =0class =contentblock> 
< tr> 
< td width =140>< strong> Startdatum< / strong>< / td> 
< td>< input id ='datePicker'name =startdatum []type =textclass =startdatumvalue =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 =Buttonvalue =Add Rowclass =AddRow>< / td> 
< / tr> 
< / table> 
 
< input type =hiddenvalue =0id =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/

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

  $ tr.prependTo（$（this）.closest（'table'））; 
  

在

  $（this）.closest（'table'）。append（$ tr）; 
  

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?

解决方案

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

in

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

这篇关于jQuery clone tablerow并添加datepicker的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！