Question

我有一个正在开发的Web应用程序，它包含一个已实现的动态添加和删除行。但是，我很难将日期添加到动态行中。在第一个静态行中，datetimepicker有效，但在动态行中，它好像没有读取它一样不起作用。

下面是我的代码

 <tbody class="body">
                <tr>
                    <td><input type="hidden" class="form-control" name="count[]" value="1"><span>1</span></td>
                    <td><input type="text" class="form-control stockDate" id="stockDate" name="date[]"></td>
                    <td><input type="text" class="form-control stock" id="stock" name="stock[]"></td>
                    <td><input type="text" class="form-control price" id="price" name="price[]"></td>
                    <td><input type="hidden" value="{{ $c->id }}" name="vehicle_id[]"></td>
                </tr>
      </tbody>

这是我的jQuery

<script type="text/javascript">

$('.stockDate').datepicker({
    dateFormat: 'yyyy-mm-dd'
});

$('#add-row').click(function() {
        var no = ($('.body tr').length-0)+1;
        var tr = '<tr><td><input type="hidden" class="form-control" name="count[]" value="'+no+'"><span>'+no+'</span></td>'+
             '<td><input type="text" class="form-control stockDate" id="stockDate" name="date[]"></td>' +
                  '<td><input type="text" class="form-control stock" name="stock[]"/></td>' +
                  '<td><input type="text" class="form-control price" name="price[]"/></td>' +
                  '<td><input type="hidden" value="{{ $c->id }}" name="vehicle_id[]"></td></tr>';
        $('.body').append(tr);
    });


</script>

有关如何解决此问题的任何想法。

谢谢

Answer 1

在名称属性中写入索引：

<tbody class="body">
                <tr>
                    <td><input type="text" class="form-control stockDate" id="stockDate" name="date[1]"></td>
                    <td><input type="text" class="form-control stock" id="stock" name="stock[1]"></td>
                    <td><input type="text" class="form-control price" id="price" name="price[1]"></td>
                </tr>
      </tbody>

非常简单...

js代码：

$('#add-row').click(function() {
        var no = ($('.body tr').length-0)+1;
        var tr = '<tr><td><span>'+no+'</span></td>'+
             '<td><input type="text" class="form-control stockDate" id="stockDate" name="date['+no+']"></td>' +
                  '<td><input type="text" class="form-control stock" name="stock['+no+']"/></td>' +
                  '<td><input type="text" class="form-control price" name="price['+no+']"/></td>' +
                  '</tr>';
        $('.body').append(tr);
    });

Answer 2

之所以发生这种情况，是因为在您调用datepicker()时，您对DOM上已经存在的项目进行了操作。当您插入新行时，它们不会被初始化。在插入元素或将作业委派给父元素之前，必须显式附加它。

$('.stockDate').datepicker({
  format: 'yyyy-mm-dd'
});

$('#add-row').click(function() {
  var no = ($('tr').length - 0) + 1;
  var tr = '<tr><td><input type="hidden" class="form-control" name="count[]" value="' + no + '"><span>' + no + '</span></td>' +
    '<td><input type="text" class="form-control stockDate" id="stockDate" name="date[]"></td>' +
    '<td><input type="text" class="form-control stock" name="stock[]"/></td>' +
    '<td><input type="text" class="form-control price" name="price[]"/></td>' +
    '<td><input type="hidden" value="145" name="vehicle_id[]"></td></tr>';
    
    // Init the datepicker for the new element
  $('#container').append(tr).find('.stockDate').datepicker({
    format: 'yyyy-mm-dd'
  });
});

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>

<button id="add-row">Add</button>

<table id="container">
  <tr>
    <td><input type="hidden" class="form-control" name="count[]" value="1"><span>1</span></td>
    <td><input type="text" class="form-control stockDate" id="stockDate" name="date[]"></td>
    <td><input type="text" class="form-control stock" name="stock[]" /></td>
    <td><input type="text" class="form-control price" name="price[]" /></td>
    <td><input type="hidden" value="1234" name="vehicle_id[]"></td>
  </tr>
</table>

代表版本。性能可能会降低，因为每次元素获得焦点时都会执行，这取决于实现：

$('#container').on('focus', '.stockDate', function() {
  $(this).datepicker({ format: 'yyyy-mm-dd' });
});

$('#add-row').click(function() {
  var no = ($('tr').length - 0) + 1;
  var tr = '<tr><td><input type="hidden" class="form-control" name="count[]" value="' + no + '"><span>' + no + '</span></td>' +
    '<td><input type="text" class="form-control stockDate" id="stockDate" name="date[]"></td>' +
    '<td><input type="text" class="form-control stock" name="stock[]"/></td>' +
    '<td><input type="text" class="form-control price" name="price[]"/></td>' +
    '<td><input type="hidden" value="145" name="vehicle_id[]"></td></tr>';

    $('#container').append(tr);
});

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>

<button id="add-row">Add</button>

<table id="container">
  <tr>
    <td><input type="hidden" class="form-control" name="count[]" value="1"><span>1</span></td>
    <td><input type="text" class="form-control stockDate" id="stockDate" name="date[]"></td>
    <td><input type="text" class="form-control stock" name="stock[]" /></td>
    <td><input type="text" class="form-control price" name="price[]" /></td>
    <td><input type="hidden" value="1234" name="vehicle_id[]"></td>
  </tr>
</table>

使用日期字段添加动态行jQuery

2 个答案: