Javascript 使用日期选择器向表中添加行
我试图在表中单击按钮添加行（添加行）。我正在尝试动态添加两个字段。 1） slnoJavascript 使用日期选择器向表中添加行,javascript,jquery,html,datepicker,Javascript,Jquery,Html,Datepicker,我试图在表中单击按钮添加行（添加行）。我正在尝试动态添加两个字段。 1） slno 2） 日期/时间 我的问题： 1） 未添加行。 2） 如何将日期选择器分配给“日期/时间”字段，动态添加 JSFIDLE是 请帮忙 html代码： <script> $(document).ready(function() { $('.date').each(function() { $(this).datepicker({ minDate:"-1m",maxDate:"0
2） 日期/时间 我的问题： 1） 未添加行。 2） 如何将日期选择器分配给“日期/时间”字段，动态添加 JSFIDLE是 请帮忙 html代码：
<script>
$(document).ready(function() {
$('.date').each(function() {
$(this).datepicker({ minDate:"-1m",maxDate:"0" });
});
});
</script>
<body>
<div id="lpage_container">
<div class="lform_container">
<h3>DETAILS OF LOCAL CONVEYANCE EXPENSES :</h3>
<form id="localexpenses" action="">
<table summary="local expense" id="localexpense_table" width="500" border="1">
<thead>
<tr>
<th width="1%" align="center"><strong>Sl.
No.</strong></th>
<th width="7%" align="center">
<strong>Date/Time</strong></th>
<th width="8%" align="center">
<strong>Remove</strong></th>
</tr>
</thead>
<tbody bgcolor="#CCCCCC">
<tr>
<td width="1%" align="center"><input type="text"
name="lsrno_00" id="srno_00" size="1" value="0"></td>
<td width="7%" align="center"><input type="text" class="date"
name="ldate_00" id="ldate_00" value="" size="8"></td>
<td> </td>
</tr>
</tbody>
</table>
<table summary="local buttons" width="500" border="1">
<tr>
<td align="right"><input type="button" value="Add Row"
id="add_ExpenseRowlocal">
</tr>
</table>
</form>
</div><!-- END subject_marks -->
<div class="clearfix"></div>
</div>
$（文档）.ready（函数（）{
$（'.date'）。每个（函数（）{
$（this.datepicker（{minDate:-1m），maxDate:“0”}）；
});
});
当地运输费用详情：
Sl。
否。
日期/时间
删除
$(function(){
// GET ID OF last row and increment it by one
var $lastChar =1, $newRow;
$get_lastID = function(){
var $id = $('#localexpense_table tr:last-child td:first-child input').attr("name");
$lastChar = parseInt($id.substr($id.length - 2), 10);
console.log('GET id: ' + $lastChar + ' | $id :'+$id);
$lastChar = $lastChar + 1;
$newRow = "<tr> \
<td><input type='text' name='lsrno_0"+$lastChar+"' value='0"+$lastChar+"' size='1'readonly /></td> \
<td><input type='text' class='date' name='ldate_0"+$lastChar+"' id='date_0"+$lastChar+"' size='8'/></td> \
<td><input type='button' value='Remove' class='del_ExpenseRowlocal' /></td> \
</tr>";
return $newRow;
};
// ***** -- START ADDING NEW ROWS
$('#add_ExpenseRowlocal').on("click", function(){
if($lastChar <= 9){
$get_lastID();
$('#localexpense_table tbody').append($newRow);
} else {
alert("Reached Maximum Rows!");
}
});
$(document).on("click", ".del_ExpenseRowlocal", function(){
$(this).closest('tr').remove();
$lastChar = $lastChar-2;
});
});
$（函数（）{
//获取最后一行的ID并将其递增1
var$lastChar=1，$newRow；
$get\u lastID=函数（）{
var$id=$（'#localexpense_table tr:last child td:first child input'）.attr（“name”）；
$lastChar=parseInt（$id.substr（$id.length-2），10）；
log（'GET id:'+$lastChar+'|$id:'+$id'）；
$lastChar=$lastChar+1；
$newRow=”\
\
\
\
";
返回$newRow；
};
//******--开始添加新行
$（'#add_ExpenseRowlocal'）。在（“单击”，function（）{
if（$lastChar您使用的jQuery版本是什么？在您的fiddle中，您没有通过framework选项卡添加jQuery，但在extenral resources下有两个版本：1.6.2和1.11.0。当我尝试运行它时，控制台中出现一个错误，$（）。on
不是函数。.on（）
出现在jQuery 1.7中，因此如果您使用的是1.6.2，那么您就不能使用.on（）
至于日期选择器，当您运行
$('.date').each(function() {
$(this).datepicker({ minDate:"-1m",maxDate:"0"
});
在document ready中，向当前存在的具有类date的所有字段添加日期选择器。将行添加到DOM后，必须将日期选择器添加到新的日期字段。类似于
$('.date', $('#localexpense_table tbody tr').filter(':last')).each(function() {
$(this).datepicker({ minDate:"-1m",maxDate:"0" });
});
在.append（）之后，
调用应该可以工作
（需要为添加的行修复一些样式）第一步在fiddle中添加jQuery。（左上角有选项）请修复你的fiddle以实际显示你的行为。你不应该在HTML中有一个脚本块，然后是我怀疑的脚本块。再加上@Karna所说的添加jQuery。当你点击fiddle@Karna中的add行时，现在什么都没有发生，按照你的指示完成。更新的fiddle在这里为“Date”中的datepicker提供建议Field作为旁注，您应该更好地考虑add row函数。例如$get_lastID不获取alst id，而是生成一个新行。它应该被重命名。它还返回新行的HTML，因此您不需要在该函数外部有一个变量来包含新行-最好使用t他返回值。太好了！事实上我是专业的仪器工程师。据我所知，VB我的公司给了我这个开发工作。我不知道html代码。对不起，打扰你了。非常感谢你的帮助。非常有用！！