这里我试图将datepicker添加到新添加的行中,但同样没有反映。尝试使用clone(true)函数但没有帮助。
以下代码显示了四列,第一列是日期字段。 必须将日期选择器复制到新添加的行中。
$<html lang="en">
<head>
<meta charset="utf-8">
<title>Expenses</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
function addRow(tableID)
{
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var counts = rowCount - 1;
var cell1 = row.insertCell(0);
var expense_date = document.createElement("input");
expense_date.type = "text";
expense_date.name = "expenses[" + counts + "].expense_date";
cell1.appendChild(expense_date);
var cell2 = row.insertCell(1);
var expense_against = document.createElement("input");
expense_against.type = "text";
expense_against.name = "expenses[" + counts + "].expense_against";
cell2.appendChild(expense_against);
var cell3 = row.insertCell(2);
var amount = document.createElement("input");
amount.type = "text";
amount.name = "expenses[" + counts + "].amount";
cell3.appendChild(amount);
var cell4 = row.insertCell(3);
var paid_by = document.createElement("input");
paid_by.type = "text";
paid_by.name = "expenses[" + counts + "].paid_by";
cell4.appendChild(paid_by);
}
</script>
</head>
<body>
<form action="submit" method="post">
<p align ="center"><font size = "6" face = "Cursive">Expenses</font></p>
<TABLE id="expensesTable" border="2" style="width:39%" align="center">
<TR>
<TD align = "center"><font size = "4" face = "Cursive">EXPENSE_DATE</font></TD>
<TD align = "center"><font size = "4" face = "Cursive">EXPENSE_AGAINST</font></TD>
<TD align = "center"><font size = "4" face = "Cursive">AMOUNT</font></TD>
<TD align = "center"><font size = "4" face = "Cursive">PAID_BY</font></TD>
</TR>
<TR>
<TD><INPUT type="text" id="datepicker" name="expenses[0].expense_date" /></TD>
<TD><INPUT type="text" name="expenses[0].expense_against" /></TD>
<TD><INPUT type="text" name="expenses[0].amount" /></TD>
<TD><INPUT type="text" name="expenses[0].paid_by" /></TD>
</TR>
</TABLE>
</div>
<p align ="center">
<INPUT type="button" value="Add More" name="expenses[0].more" onclick="addRow('expensesTable')" />
<input type="submit" value="SUBMIT" />
</p>
</form>
</body>
</html>
答案 0 :(得分:1)
您需要做的是在将行添加到页面后调用datepicker()
。这意味着每次添加新行时都必须在同一行上初始化插件。
答案 1 :(得分:1)
在追加元素后调用datepicker,如下所示。
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var counts = rowCount - 1;
var cell1 = row.insertCell(0);
var expense_date = document.createElement("input");
expense_date.type = "text";
expense_date.name = "expenses[" + counts + "].expense_date";
cell1.appendChild(expense_date);
//add this line.
$('input[name="' + expense_date.name + '"]').datepicker();
var cell2 = row.insertCell(1);
var expense_against = document.createElement("input");
expense_against.type = "text";
expense_against.name = "expenses[" + counts + "].expense_against";
cell2.appendChild(expense_against);
var cell3 = row.insertCell(2);
var amount = document.createElement("input");
amount.type = "text";
amount.name = "expenses[" + counts + "].amount";
cell3.appendChild(amount);
var cell4 = row.insertCell(3);
var paid_by = document.createElement("input");
paid_by.type = "text";
paid_by.name = "expenses[" + counts + "].paid_by";
cell4.appendChild(paid_by);
}