0

<< 展开本帖的问题>>

我想要做的还将日期选择器的 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);
}

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

更新

请检查这个小提琴。

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

4

2 回答 2

1

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

例子：

代码

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

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

于 2013-02-03T00:57:34.370 回答
0

您已将 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);
}
于 2012-09-21T08:34:39.043 回答