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

それは機能しますが、行を追加すると、日付ピッカーは引き続き表示されますが、常に最初の行のテキストボックスに値が返されます。どうやってするか？

アップデート

このフィドルを確認してください。

コードで問題が解決したことがわかりました (datepicker テキストボックスのID 要素を省略する必要があります) が、datepicker を選択せず​​に最初に行を追加した場合にのみ機能します。ただし、行の追加を停止して日付ピッカーの使用を開始すると (以前に追加したテキストボックス全体を日付ピッカーで埋める)、行を再度追加すると、新しく追加された行に対して日付ピッカーが機能しなくなります。

4

2 に答える 2

1

これは古い投稿だと思います..前に同じ問題に行きました..しかし、別の行を追加して解決しました。たぶんこれが役立つかもしれません...

例：

HTMLコード

<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 を使用しました。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 で日付ピッカーを作成する必要があります。

これはあなたの問題を解決するコードです。行を複製したので、日付ピッカーを選択すると同じ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 に答える