javascript - 使用 Datepicker 插入 HTML 表格行不起作用

Question

我正在使用 Datepicker 插件插入日期值。我还使用了一个允许用户在 HTML 表格中插入单元格的脚本。

当用户访问“edit.php”页面时，他们有一个包含多个<input type="text"> 的表格。从数据库中获取信息。他们可以对其进行编辑，或通过单击“添加行”按钮插入更多数据。

因此，如果用户希望表中的另一行向数据库中插入更多数据，则日期选择器插件不会对新行起作用。

这是我的日期选择器插件代码:

$(function() {
 $( ".datepicker" ).datepicker({ dateFormat: "dd-mm-yy" });
}); 

下面是允许我插入更多单元格行的代码:

function addRow()
{
//add a row to the rows collection and get a reference to the newly added row
var newRow = document.all("tabela1").insertRow(-1);

//add 3 cells (<td>) to the new row and set the innerHTML to contain text boxes

var oCell = newRow.insertCell();
oCell.innerHTML = "<tr><td><input type='text' name='ippdesc[]'></td>";

oCell = newRow.insertCell();
oCell.innerHTML = "<td><input type='text' name='ippemp[]'></td>";

oCell = newRow.insertCell();
oCell.innerHTML = "<td><input type='text' class='datepicker' name='ippdata[]' value='05-05-2005'></td>";
oCell = newRow.insertCell();
oCell.innerHTML = "<td><input type='checkbox' name='chk[]'></td></tr>";

document.getElementById("addr").onclick = doFunction;
}

谢谢!

Answer 1

它可能不起作用，因为您是在调用 jQuery 函数之后为日期选择器创建 HTML 代码。通常，日期选择器功能的工作原理是在加载页面时遍历 HTML 代码并将该功能链接到所有合适的元素(即具有类“datepicker”的输入项)；它将忽略调用该函数后创建的 HTML 项目。

所以你必须在加载新行后再次调用日期选择器函数；我会首先取消绑定(bind)日期选择器函数以避免在同一元素上使用多个日期选择器，然后再次绑定(bind)它们(希望这是有道理的......)像这样:

oCell.innerHTML = "<td><input type='text' class='datepicker' name='ippdata[]' value='05-05-2005'></td>";
oCell = newRow.insertCell();
$( ".datepicker" ).datepicker( "destroy" );
$( ".datepicker" ).datepicker({ dateFormat: "dd-mm-yy" });