我正在尝试通过单击表中的按钮添加行(添加行)。我正在尝试动态添加 2 个字段。
1) slno
2) 日期/时间。
我的问题: 1) 行未添加。 2) 如何将日期选择器分配给动态添加的“日期/时间”字段。
Jsfiddle 是 http://jsfiddle.net/RXzs7/12/
请帮忙。
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>
JS代码:
$(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;
});
});
最佳答案
您使用的 jQuery 版本是什么？在你的 fiddle 中，你没有通过框架选项卡添加 jQuery，但在外部资源下你有两个版本:1.6.2 和 1.11.0。当我尝试运行它时，我在控制台中收到一个错误，指出 $().on 不是函数。 .on() 出现在 jQuery 1.7 中，因此如果您使用的是 1.6.2，则无法使用 .on()。
至于日期选择器，当您运行时
$('.date').each(function() {
$(this).datepicker({ minDate:"-1m",maxDate:"0"
});
在准备好的文档中，将日期选择器添加到当前存在的具有类日期的所有字段。将行添加到 DOM 后，必须将日期选择器添加到新的日期字段。类似的东西
$('.date', $('#localexpense_table tbody tr').filter(':last')).each(function() {
$(this).datepicker({ minDate:"-1m",maxDate:"0" });
});
在您的 .append() 调用应该起作用之后。
Working fiddle (需要为添加的行修复一些样式)
关于javascript - 使用日期选择器向表添加行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23151669/