HTML CODE

Question

＆LT;＆LT;扩展 this thread ＆gt;＆gt;

的问题

我想要做的是将日期选择器的jQuery函数动态添加到表中。我有这张桌子：

<table id="tblDetail">
  <tr>
    <td><input type="text" class="datepicker" name="a[]"></td>
  </tr>
</table>
<button id="addinput">Add row</button>
<input type="button" id="removeRow" value="Delete row" onclick="removeRowFromTable();"/>

为了在javascript上选择日期，我使用了：

$(function() {
  $('#addinput').click(function() {
    $('#tblDetail tbody>tr:last').clone(true).insertAfter('#tblDetail tbody>tr:last');
  });

  $('.datepicker').live("click", function() {
    $(this).datepicker({
        changeMonth: true,
        changeYear: true,
        gotoCurrent: true,
        dateFormat: 'yy-mm-dd',
        yearRange: '1980:c',
        defaultDate: '-10y'
    }).datepicker('show');
  });
});

function removeRowFromTable() {
  var tbl = document.getElementById('tblDetail');
  var lastRow = tbl.rows.length;
  if (lastRow > 2) tbl.deleteRow(lastRow - 1);
}

它可以工作，但是当我添加行时，日期选择器仍会显示但始终将值返回到第一行文本框。怎么做？

更新

请检查 fiddle 。

我发现代码解决了问题（您必须在datepicker文本框中省略 ID元素），但只有在您首先添加行而不选择任何datepicker时它才有效。但是，当您停止添加行并开始使用datepicker（填充先前使用datepicker添加的整个文本框）时，再次添加行时，datepicker将不适用于新添加的行。

Answer 1

我认为这是一个旧帖子..我之前也遇到了同样的问题..但是我使用添加另一行解决了它。也许这可以帮助......

示例：

HTML CODE

<table width="100%" border="1" cellpadding="1" id="listtahunan" class="dataTable">
  <thead>
  <tr>
    <th scope="col">Start Date</th>
    <th scope="col">End Date</th>
  </tr>
  </thead>
  <tbody id="listyear">
  <tr class="row">
    <td><input type="text" name="startDate[]" id="from1"/></td>
    <td><input type="text" name="endDate[]" id="to1" /></td>
  </tr>
  </tbody>
</table>

jQuery代码

$(document).ready(function() {
var counter = 2;
 $('#add').click(function(){

     var newTxtBoxTR = $(document.createElement('tr')).attr('id','row'+counter);

     newTxtBoxTR.html('<td><input type="text" name="startDate[]" id="from'+counter+'" /></td>' + '<td><input type="text" name="endDate[]" id="to'+counter+'" /></td>');

     newTxtBoxTR.appendTo("#listyear");

 $( "#from"+counter ).datepicker({
  //defaultDate: "+1w",
  changeMonth: true,
  changeYear: true,
  numberOfMonths: 1,
});
$( "#to"+counter ).datepicker({
  //defaultDate: "+1w",
  changeMonth: true,
  changeYear: true,
  numberOfMonths: 1,
});
 counter++;
});
});

希望这有助于......问候。

Answer 2

您已将id用于datepicker。 id必须是唯一的。所以你会尝试像这样的类名

<table id="detail">
  <tr>
    <td><input type="text" id="date" name="date[]" class="datepicker"></td>
  </tr>
</table>

<script language="Javascript">
var dates = $('.datepicker').datepicker({
    showAnim: 'slide',
    dateFormat: 'yy-mm-dd'
});
</script>

如果你想在单个函数中添加多个，请尝试这个

$('.datepicker').each(function(){
    $(this).datepicker();
});

或者你必须动态地在文本框中添加id并创建一个动态id为

的日期选择器

这是解决您问题的代码。您已克隆该行，因此在您选择datepicker时它会添加相同的ID。现在我变成了这样的

$(function () {

    $('#addinput').click(function () {

        var textbox_add = $('<tr><td><input type="text" class="datepicker"  name="a[]" ></td></tr>');
        textbox_add.appendTo('#tblDetail tbody');

    });

    $('.datepicker').live("click", function () {
        $(this).datepicker({
            changeMonth: true,
            changeYear: true,
            gotoCurrent: true,
            dateFormat: 'yy-mm-dd',
            yearRange: '1980:c',
            defaultDate: '-10y'
        }).datepicker('show');
    });
});

function removeRowFromTable() {
    var tbl = document.getElementById('tblDetail');
    var lastRow = tbl.rows.length;
    if (lastRow > 2) tbl.deleteRow(lastRow - 1);
}

JQuery Date-Picker不适用于动态表单

2 个答案:

HTML CODE

jQuery代码