-1 
**It's my cloned html element**
<pre>    
<input type="text" name="c_date[]" id="c_date1"class="form-control c_date comm"title='1'/><br/>
<input type="text" name="c_date[]" id="c_date2"class="form-control c_date comm"title='2'/><br/>
<input type="text" name="c_date[]" id="c_date3"class="form-control c_date comm"title='3'/></br/>
<input type="text" name="c_date[]" id="c_date4"class="form-control c_date comm"title='4'/>
</pre>

次のコードで一意のID名を作成しました

<code>
$("table tr").each(function(index){
      var s=index+i;
      $(this).find("td .c_date").attr('title',index+i);
      $(this).find("td .c_date").attr('id','c_date'+s);
});
</code>

私のdatetimeプラグインコード.................

<code>
       $("table tr td .c_date").each(function(){
            var val_num = $(this).attr('title');
            $("#c_date"+val_num).datetimepicker({
                useCurrent:true,
                format:'YYYY-MM-DD'
            });
        });
</code>

いくつかのフィールドを含むテーブル行を複製しました.そのうちの1つは「c_date」入力フィールドです。それはより多くの数になります。すべてのフィールドに日時ピッカーを設定したい。動作しない私のコードの上に........

4

1 に答える 1

2

プラグインをアタッチするためのサイクルは必要ありません。これはうまくいくはずです

$('.c_date').datetimepicker({
 useCurrent:true,
 format:'YYYY-MM-DD'
});

UPDATE 2 これはうまくいくはずです。最初に、添付されているすべての日時ピッカーを破棄してから、クラスに添付する必要があります

$(document).ready(function() {
$('.datepicker').datetimepicker();
  $('input[name="cmdAddRow"]').on('click', function() {
  	$('.datepicker').each(function(){
    $(this).data('DateTimePicker').destroy();
    });
    $curRow = $(this).parents('tr');
    rowIndex = $curRow.index() + 1;
    $newRow = $curRow.clone(true).find(".comm").val("").end();
    $curRow.after($newRow);
    $newRow.find('.datepicker').attr({
      id: rowIndex,
      title: rowIndex
    });
    $('.datepicker').datetimepicker();
  });
});
td {
  position: relative;
}
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.js"></script><style type="text/css"></style>
      <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
      <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/css/result-light.css">
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
      <script type="text/javascript" src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/src/js/bootstrap-datetimepicker.js"></script>
      <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/build/css/bootstrap-datetimepicker.css">
<!-- padding for jsfiddle -->
<table>
  <tr>
    <td valign="top" width="30px;">
      <span class="id"></span>
    </td>

   
    <td valign="top" width="150px">
      <input class="form-control comm wtime" type="number" step="any" id="latbox" value="" min="0" max="20" name="w_time[]">
      <!--<span class="error">*</span>-->
    </td>
    <td>
      <select name="taskStatus[]" id="taskStatus" class="form-control comm">
        <option value="">Select Status</option>
        <option value="1">In Progress</option>
        <option value="2">Done</option>
        <option value="3">Pending</option>
      </select>
    </td>
    <td>
      <input type="text" name="c_date[]" class="form-control datepicker comm" />
    </td>

    <td valign="top" style="padding-left: 25px;">
      <input class="btn btn-danger" id="remove" type="button" value="Remove">
    </td>
    <td valign="top">
      <input class="btn btn-info" type="button" name="cmdAddRow" value="Add">
    </td>
  </tr>
</table>

于 2016-05-24T05:04:24.730 に答える