[英]datepicker not working on cloned rows
i found this zebra datepicker but my problem is that dates are not functional on cloned rows ... here is my fiddle code: html 我找到了这个斑马datepicker,但是我的问题是日期在克隆行上不起作用...这是我的小提琴代码:html
<DIV id="mainContent_pnlEmploymentHistory">
<form id="form1" name="form1" method="post" action="value.php">
<TABLE id="dataTable">
<TBODY>
<TR>
<TD style="width: 310px; height: 20px; text-align: center;">Name of Employer</TD>
<TD style="width: 430px; height: 20px; text-align: center;"> Employer Address</TD>
<TD style="width: 150px; height: 20px; text-align: center;">FROM</TD>
<TD style="width: 150px; height: 20px; text-align: center;">TO</TD></TR>
<TR class="row_to_clone_fw_emp">
<TD style="width: 310px; height: 20px; text-align: center;">
<input type="text" id="fwemployer" name="fwemployer[]" style="width:300px"/>
</TD>
<TD style="width: 430px; height: 20px; text-align: center;">
<input type="text" id="fwempaddress" name="fwempaddress[]" style="width:100%"/></TD>
<TD>
<input id="datepicker-example7-start" type="text" name="datefrom[]"/></TD>
<TD>
<input id="datepicker-example7-end" type="text" name="dateto[]"/></TD>
</TR>
</TBODY>
</TABLE>
<table>
<tr>
<td colspan="3" align="right"><INPUT type="button" value="Add Row" id="addrow" onclick="addRowfwemp(); return false;"/></td>
<td colspan="4" align="right"><input type="submit" name="Submit" value="Submit" /></td>
</tr>
</table>
</form>
</DIV>
javascript JavaScript的
$(document).ready(function() {
$('#datepicker-example7-start').Zebra_DatePicker({
direction: false,
pair: $('#datepicker-example7-end')
});
$('#datepicker-example7-end').Zebra_DatePicker({
direction: true
});
});
$(document).ready(function(){
$( "#addrow" ).click(function() {
var zdp = $('#datepicker-example7-start').data('Zebra_DatePicker');
var zdp1 = $('#datepicker-example7-end').data('Zebra_DatePicker');
zdp.destroy();
zdp1.destroy();
});
});
function addRowfwemp() {
/* Declare variables */
var elements, templateRow, rowCount, row, className, newRow, element;
var i, s, t;
/* Get and count all "tr" elements with class="row". The last one will
* be serve as a template. */
if (!document.getElementsByTagName)
return false; /* DOM not supported */
elements = document.getElementsByTagName("tr");
templateRow = null;
rowCount = 0;
for (i = 0; i < elements.length; i++) {
row = elements.item(i);
/* Get the "class" attribute of the row. */
className = null;
if (row.getAttribute)
className = row.getAttribute('class');
if (className === null && row.attributes) { // MSIE 5
/* getAttribute('class') always returns null on MSIE 5, and
* row.attributes doesn't work on Firefox 1.0. Go figure. */
className = row.attributes['class'];
if (className && typeof(className) === 'object' && className.value) {
// MSIE 6
className = className.value;
}
}
/* This is not one of the rows we're looking for. Move along. */
if (className !== "row_to_clone_fw_emp")
continue;
/* This *is* a row we're looking for. */
templateRow = row;
rowCount++;
}
if (templateRow === null)
return false; /* Couldn't find a template row. */
/* Make a copy of the template row */
newRow = templateRow.cloneNode(true);
/* Change the form variables e.g. price[x] -> price[rowCount] */
elements = newRow.getElementsByTagName("input");
for (i = 0; i < elements.length; i++) {
element = elements.item(i);
s = null;
s = element.getAttribute("name");
if (s === null)
continue;
t = s.split("[");
if (t.length < 2)
continue;
s = t[0] + "[" + rowCount.toString() + "]";
element.setAttribute("name", s);
element.value = "";
}
/* Add the newly-created row to the table */
templateRow.parentNode.appendChild(newRow);
return true;
}
http://jsfiddle.net/jakecruz011/ZvsZm/ ... it might be a little broken since i cant upload all external resources but definitely the cloning methods and how datepicker is called is in there ... http://jsfiddle.net/jakecruz011/ZvsZm/ ...由于我无法上载所有外部资源,因此可能有点破损,但是肯定存在克隆方法以及如何调用datepicker的问题。
the original code can be found here (exxample 7): http://stefangabos.ro/jquery/zebra-datepicker/ 原始代码可以在这里找到(示例7): http ://stefangabos.ro/jquery/zebra-datepicker/
files on github is downloadable here: https://github.com/stefangabos/Zebra_Datepicker/ github上的文件可在此处下载: https : //github.com/stefangabos/Zebra_Datepicker/
thanks so much for the help! 非常感谢你的帮助! would be much appreciated ... 将不胜感激...
You need to call the datepicker
function again, after append the new elements to DOM
在将新元素追加到DOM
之后,您需要再次调用datepicker
函数
I would suggest you to add a common class for the datepicker input fields. 我建议您为datepicker输入字段添加一个通用类。
<TD>
<input id="datepicker-example7-start" type="text" name="datefrom[]" class="dp-start"/>
</TD>
<TD>
<input id="datepicker-example7-end" type="text" name="dateto[]" class="dp-end"/>
</TD>
and call the datepicker function like this just after append the new row. 并在追加新行后立即调用datepicker函数。
$('.dp-start:last').Zebra_DatePicker({
direction: false,
pair: $('.dp-end:last')
});
$('.dp-end:last').Zebra_DatePicker({
direction: true
});
I have not tried this. 我还没有尝试过。 Hope it will work. 希望它能工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.