gpt4 book ai didi

javascript - 动态生成的行上的 jQuery 日期选择器

转载 作者:可可西里 更新时间:2023-11-01 14:45:52 25 4
gpt4 key购买 nike

我正在使用以下 javascript 代码动态生成表格行:

$('#addNew').on('click', function() {
var clone = $('table.table-responsive tr.cloneme:first').clone();
console.log(clone);
clone.append("<td><button class='deleteAdded btn btn-danger'>Remove</button></td>")
$('table.table-responsive').append(clone);
calculateSum();
});

这是我将 jQuery 日历附加到日期输入的脚本

$(function() {
$('input').filter('.datepicker').datepicker({
dateFormat: 'yy-mm-dd',
changeMonth: true,
changeYear: true,
});
});

现在我面临的问题是 jQuery 日历仅在第一行弹出。它不适用于生成的行。

这是我的html

<td>
<input type="text" class="form-control datepicker" name="invoiceDate[]" readonly="readonly" />
</td>

请告诉我如何使 jQuery 日历适用于所有动态生成的行。环顾谷歌但没有任何帮助。

提前致谢。

最佳答案

您必须在创建新行后启动日期选择器

jQuery(function($) {
//create a original copy of the row to clone later
var $tr = $('table.table-responsive tr.cloneme:first').clone();

//add dp to existing rows
addDP($('input.datepicker'));

$('#addNew').on('click', function() {
var clone = $tr.clone();
console.log(clone);
clone.append("<td><button class='deleteAdded btn btn-danger'>Remove</button></td>");
//add dp to the new row
addDP(clone.find('input.datepicker'));
$('table.table-responsive').append(clone);
calculateSum();
});

function addDP($els) {
$els.datepicker({
dateFormat: 'yy-mm-dd',
changeMonth: true,
changeYear: true,
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<table class="table-responsive">
<tr class="cloneme">
<td>
<input type="text" class="form-control datepicker" name="invoiceDate[]" readonly="readonly" />
</td>
</tr>
</table>
<button id="addNew">Add</button>

关于javascript - 动态生成的行上的 jQuery 日期选择器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30566676/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com